「クリックしてブロックを非表示にする方法」や「条件で色付けする方法」などのトースターに関する質問が定期的に表示されるので、jQueryコードと開発速度を改善できる4つの「トリック」を紹介します。
最初の例
以下の説明の例：
jQueryの例と
Angular Lightの例この例は、2つの「モーメント」で構成されています。1.クリックして「パネル」を選択し、2。選択した「パネル」を表示します。
1. jQueryの例では、
class="button"ボタンをマークするように強制されているため、コードからそれらを見つけることができます（ただし、クラスは元々作成されていません）。 Angular Lightの例では、これは必要ありません-DOMに変数をもたらします。このボタンをクリックすると、変数が割り当てられることを直接示すことができます：
al-click="active='win'"つまり、 ここでは、クリックするだけでコードが実行されます：
active='win' 。
2.選択したパネルをjQueryで表示するには、ブロック（id =“ info_win”）をマークしてコードでブロックを見つけ、コードで表示する必要がある内容に応じて操作を行う必要があります。 上記のように、ALを使用してブロックをマークする必要はありません。ブロックを表示する条件を指定するだけです：
al-show="active=='win'" 、つまり 変数
active=='win'場合、現在のブロックが表示されます。
もちろん、このコードブロックをid = "dialog"で "アクティブ化"する必要があります。
alight.bootstrap('#dialog', { active: 'win'
この例では、2つの「コマンド」のみが必要でした：
al-clickと
al-show （上記のリンクから例を見ることができます）。
ボタンの色を追加
例：
jQueryの例と
Angular Lightの例ここで、たとえば、アクティブなボタンを強調表示する必要があります。「アクティブな」クラスを追加しました。おそらくjQueryの例に最適なのは、すべてのボタンのクラスを削除し、目的のボタンに設定することです。
dialog.find('.button').removeClass('active'); dialog.find('.button[value=' + code + ']').addClass('active');
OK、ALでやろう。 なぜなら
アクティブな変数が使用可能になったら、それを使用します。
ボタン
al-class = " active ： active == 'win' "をオンにします。 このコードは、
active == 'win'の条件が満たされると、
アクティブクラスを現在の要素に追加します。つまり、この「効果」のためにコードjsを追加する必要はありません。
例の複雑化
例：
jQueryの例と
Angular Lightの例多くのタスクでは、ユーザーデータの入力と出力が必要です。ブロックの表示/非表示を切り替えるテキスト入力、その出力、チェックボックスコントロールの例を作成します。
jQueryのオプション-HTMLのすべての要素（＃name、＃visible、＃box、＃boxtext）をマークアップしてから、イベントにサブスクライブし、変換、テキストの表示、ブロックの非表示の機能を作成します。
ALの場合、2つの変数
nameと
visibleが必要です。
input type="text"からテキストを取得するには、コマンド
al-value="name"を使用し（入力されたすべてのテキストを変数
nameに割り当てます）、このテキストを表示するには、
{{name}}コンストラクトを適切な場所にプッシュします、しかし出力の前にテキストを変換する必要があるので、js-
{{ name.toUpperCase() }}使用します
input type="checkbox"要素は "command"
al-checked="visible"を使用し、要素の状態に応じて
visible = trueまたは
falseを割り当て
ます 。 さて、ブロック
al-show="visible"を非表示にする方法は既に知っています。
（jQueryの例では、初期値がjsから設定されると想定されているため、jsの要素が初期化されます）
最も難しい
すべてのAngular.js開発者が
恐れているディレクティブについて学ぶ時間
です 。 なんで？ たとえば、要素に対して何らかのトリッキーな作業を行うか、jQueryプラグインを「挿入」する必要があります。
最初は、ディレクティブは非常に単純になります。たとえば、テキストを赤で色付けするディレクティブを作成します。
これを行うには、たとえばタグ
al-redで要素を「マーク」し
text ：
textそれでは、ディレクティブ自体を作成しましょう。 関数を同じ場所タグに配置する必要があります。
alight.directives.al.red = function(scope, element) { $(element).css('color', 'red') };
この関数は、入力としてマークした要素を受け入れます。 完了、
例はこちらです。 そうすれば、jQueryのALとALのjQueryを使用できます。
2番目の例であるボタンのグループでわかるように、ボタンには同じHTMLコードがあります。 コードとテキストのみが異なります。 そのため、HTMLコードを複製しないようにループで表示できますが、これは既に次の記事で説明しています。
そして最後に、
Toasterから
jQueryへの実際の
例であり
、ALに変換されます （ただし、さらに簡単にすることもできます）。
主なアイデアは、MVC / MVVM（Angular Light）を試したい場合、jQueryを放棄する必要がないということです。
Angular Lightを使用していくつかの要素を実行し、両方を活用できます。 Angular Lightを使用してもプロジェクトは重くなりません。最新バージョンの重量は約
17kb （圧縮、gzip圧縮、最小化）です。 Angular Lightは、最速のMVVMライブラリの1つでもあります。
PS：Angular Lightを試してみると、バージョンに注意してください。インターネット上では、古いAngular Lighのほとんどの例がありますが、少し違いがあります。