指令は、AngularJSがHTML要素を操作する方法として理解しています。
AngularJSの学習の最初のステップは、ノードがアプリケーションのルートノードであることを示すために組み込みの命令ng-appを作成することであるため、命令はすでに馴染みがあります。
このログは、組み込みの指示をいくつか記録し、最初に使用してから、いくつかの興味深いことについて話します。
組み込みコマンド
すべての組み込みディレクティブにはNGプレフィックスがあり、競合を回避するためにこのプレフィックスをカスタムディレクティブに使用することはお勧めしません。
いくつかの一般的な組み込みの指示から始めます。
まず、いくつかの重要な組み込み手順をリストし、範囲の問題について簡単に説明します。
ng-model
この説明は、フォームコントロールを現在の範囲のプロパティに結合する場合、正しくないようです。
しかし、歯ごたえがあることを心配しないでください。たとえば、使用するときは簡単に理解できます。
コードコピーは次のとおりです。
<input type = "text" ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someproperty}}
ng-init
この指令は、初期化された内部範囲と呼ばれます。
この命令は通常、デモや何かを与えるなど、より小さなアプリケーションに表示されます...
コードコピーは次のとおりです。
<div ng-init = "job = 'fighter'">
私はa/and {{job}}です
</div>
Ng-Initに加えて、より多くのより良いオプションがあります。
ng-app
AngularJSを使用するたびに、このコマンドはそれから切り離せません。ちなみに、$ Rootscopeが含まれています。
ng-app要素が$ rootscopeの出発点になると宣言します。これは、スコープチェーンのルートであり、通常は<html>で宣言されています。
つまり、ルートの下のスコープでアクセスできます。
ただし、空を飛び回るグローバルな変数を避けるために$ rotscopeを乱用することはお勧めしません。
これが例です：
コードコピーは次のとおりです。
<html ng-app = "myApp">
<body>
{{someproperty}}
</body>
<スクリプト>
var myapp = angular.module（ 'myapp'、[]）
.run（function（$ rootscope）{
$ rootscope.someproperty = 'hello computer';
}）;
</script>
</html>
ng-controller
この命令を使用して、コントローラーをDOM要素にインストールします。
コントローラー？確かに、これを文字通り理解するのは良いことなので、なぜコントローラーが必要なのですか？
AngularJS 1.2.xの場合、このようなコントローラーを定義することもできることを忘れないでください...
コードコピーは次のとおりです。
function ohmycontroller（$ scope）{
// ...
}
この方法により、この方法はコントローラーが空を飛び回るため、AngularJS 1.3.xで禁止されています。レベルの違いはわかりません。
NG-Controllerにはパラメーターとして式が必要である必要があり、さらに、以前の$スコープのメソッドとプロパティは$スコープで継承され、$ Rootscopeも含まれています。
以下は単純な例です。先祖は子供の範囲にアクセスできません。
コードコピーは次のとおりです。
<div ng-controller = "AncestorController">
{{ancestorname}}
{{ChildName}}
<div ng-controller = "ChildController">
{{ancestorname}}
{{ChildName}}
</div>
</div>
<スクリプト>
var myapp = angular.module（ 'myapp'、[]）
.Controller（ 'ChildController'、function（$ scope）{
$ scope.childname = 'child';
}）
.Controller（ 'AncestorController'、function（$ scope）{
$ SCOPE.ANCESTORNAME = 'Ancestor';
}）;
</script>
スコープの問題はそれ以上です。とりあえずそれを脇に置いて、他の組み込みの指示を見続けましょう。
ng-form
最初はフォームコマンドがある理由がわかりませんでしたが、<form>タグは十分に感じました。
フォーム検証を例にとると、前の記事にはコードがあります。
コードコピーは次のとおりです。
<入力型= "submit" ng-disabled = "mainform。$ invalid" />
つまり、フォームのステータスが無効な場合、送信ボタンは無効になります。
たとえば、シーンがもう少し複雑である場合、親の形には複数の子供の形があり、3つの子フォームが検証に合格したときに親の形を提出できます。
ただし、<form>はネストすることはできません。
このシナリオを考慮して、NG-Formディレクティブを使用してこの問題を解決します。
例えば：
コードコピーは次のとおりです。
<form name = "mainform" novalidate>
<div ng-form = "form1">
名前：<入力型= "text" ng-required = "true" ng-model = "name"/> <br>
ID番号：<入力型= "番号" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "idnum"/>
</div>
<br>
<div ng-form = "form2">
ガーディアン名：<入力型= "text" ng-required = "true" ng-model = "gname"/> <br>
ガーディアンID番号：<入力型= "ng-minlength =" 15 "ng-maxlength =" 18 "ng-required =" true "ng-model =" gidnum "/>
</div>
<button ng-disabled = "form1。$ nivalid && form2。$ invalid">すべて</button>を送信します
</form>
ng disabled
このような属性が表示されている限り有効になる場合、式の戻り値によって値をtrue/falseに戻すことにより、Angularjsで効果的にすることができます。
フォーム入力フィールドを無効にします。
コードコピーは次のとおりです。
<textarea ng-disabled = "1+1 == 2"> 1+1 =？</textarea>
ng-readonly
式によって値をtrue/falseに返すことにより、フォーム入力フィールドを読み取り専用に設定します。
例を挙げれば、3秒後に読み取り専用になります。
コードコピーは次のとおりです。
<input type = "text" ng-readonly = "stoptheworld" value = "3Sの後に世界を停止します"/>
.run（function（$ Rootscope、$ Timeout）{
$ rootscope.stoptheworld = false;
$ timeout（function（）{
$ rootscope.stoptheworld = true;
}、3000）
}）
ng-checked
これは、...などの<入力型= "チェックボックス" />
コードコピーは次のとおりです。
<入力型= "チェックボックス" ng-checked = "someproperty" ng-init = "someproperty = true" ng-model = "someproperty">
ng選択
<select>で<option>で使用するために、例：
コードコピーは次のとおりです。
<label>
<入力型= "チェックボックス" ng-model = "isfullstack">
私はフルスタックエンジニアです
</label>
<select>
<オプション>フロントエンド</option>
<オプション>バックエンド</option>
<オプションng-selected = "isfullstack">フルスタック!!! </option>
</select>
ng-show/ng-hide
式に応じてHTML要素を表示/非表示にします。たとえば、DOMから削除されていない隠されていることに注意してください。
コードコピーは次のとおりです。
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
あなたは私を見ることができません。
</div>
ng-change
それはHTMLのonxxxか何かではなく、ng-xxxです。
ng-modelと組み合わせて使用して、Ng-changeを例として取得します。
コードコピーは次のとおりです。
<input type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<Code> {{calc.Result}} </code>
または、たとえば、ng-options
{{}}
実際、これも指令です。たぶんNg-bindに似ていると感じていますが、ページがわずかに遅くなると見られるかもしれません。
さらに、{{{}}のパフォーマンスはng-bindよりもはるかに少ないですが、使用するのは非常に便利です。
ng-bind
ng-bindの動作は{{{}}に似ていますが、この命令を使用してFouc（無限のコンテンツのフラッシュ）を避けることができます。
ng-cloak
Ng-Cloakは、私たちのためにFoucを解決することもできます。 Ng-Cloakは、ルートが対応するページを呼び出すまで内部要素を隠します。
ng-if
NG-IFの式がfalseの場合、対応する要素は非表示ではなくDOMから削除されますが、要素を確認すると、式がコメントになることがわかります。
位相が隠されている場合は、ng-hideを使用できます。
コードコピーは次のとおりです。
<div ng-if = "1+1 === 3">
この要素はレビューできません
</div>
<div ng-hide = "1+1 == 2">
レビューできます
</div>
ng-switch
単独で使用するかどうかは関係ありません、ここに例があります：
コードコピーは次のとおりです。
<div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
ng-repeat
それが反復と呼ばれていないことを理解していません。要するに、各要素のコレクションを通過し、テンプレートインスタンスを生成することです。次のように、各インスタンスの範囲でいくつかの特別な属性を使用できます。
コードコピーは次のとおりです。
$インデックス
$最初
$ last
$中央
平
奇数
具体的に説明することなく、これらが何であるかを簡単に確認できます。これが例です：
コードコピーは次のとおりです。
<ul>
<li ng-repeat = "char in
[{'alphabet'： 'k'}、
{'alphabet'： 'a'}、
{'Alphabet'： 'V'}、
{'alphabet'： 'l'}、
{'alphabet'： 'e'}、
{'alphabet'： 'z'}] "ng-show =" $ ven "> {{char.alphabet}} </li>
</ul>
ng-href
最初はテキストフィールドでNGモデルを作成し、このようにHREFで書きました。
実際、HREFとNG-HREFに違いはないため、これを試すことができます。
コードコピーは次のとおりです。
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linktext}} </a> </li>
<li> <a href = "{{myhref}}">クリックしますが、必ずしも正しいアドレスではありません</a> </li>
</ul>
.run（function（$ Rootscope、$ Timeout）{
$ rootscope.linktext = 'まだロードされていないので、クリックできません';
$ timeout（function（）{
$ rootscope.linktext = 'クリックしてください'
$ rootscope.myhref = 'http://google.com';
}、2000）;
}）
ng-src
同じことが言えます。つまり、式が有効になる前にリソースをロードしないでください。
例（PS：写真は良い！）：
コードコピーは次のとおりです。
<img ng-src = "{{imgsrc}}"/>
.run（function（$ Rootscope、$ Timeout）{
$ timeout（function（）{
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}、2000）;
}）
ngクラス
たとえば、スコープのオブジェクトを使用してクラススタイルを動的に変更します。
コードコピーは次のとおりです。
<style>
.red {background-color：red;}
.blue {background-color：blue;}
</style>
<div ng-controller = "curtimecontroller">
<button ng-click = "getCurrentsecond（）"> get time！</button>
<p ng-class = "{red：x％2 == 0、blue：x％2！= 0}">番号IS：{{x}} </p>
</div>
.Controller（ 'curtimecontroller'、function（$ scope）{
$ scope.getCurrentsecond = function（）{
$ scope.x = new date（）。getSeconds（）;
};
}）
上記はこの記事で説明されているすべてのコンテンツです。あなたがそれを気に入っていただければ幸いです。