AngularJS 組み込みディレクティブ_AngularJS-jsチュートリアル-php.cn

ディレクティブは、AngularJS が HTML 要素を操作する方法として理解しています。
AngularJS を学習する最初のステップは、このノードがアプリケーションのルートノードであることを示す組み込みディレクティブ ng-app を作成することなので、このディレクティブはすでによく知られています。

このブログでは、いくつかの組み込みコマンドを簡単に記録します。まずそれらを使用してから、いくつかの興味深い点について説明します。

組み込みコマンド

すべての組み込み命令には ng という接頭辞が付けられます。競合を避けるために、カスタム命令でこの接頭辞を使用することはお勧めできません。
いくつかの一般的な組み込みコマンドから始めます。
まず、主要な組み込み命令をいくつか挙げて、スコープの問題について簡単に説明します。

NG モデル

フォームコントロールを現在のスコープのプロパティにバインドすることが正しくないようです。
ただし、今のところは表現について心配する必要はありません。使用すると理解しやすくなります。たとえば、

コードをコピーしますコードは次のとおりです:

ng-init

このディレクティブは呼び出されたときに内部スコープを初期化します。
このコマンドは通常、デモなどの比較的小規模なアプリケーションで使用されます...

コードをコピーしますコードは次のとおりです:

私は{{仕事}}
です

ng-init に加えて、さらに優れたオプションがあります。

NG アプリ

AngularJS を使用するときは、このコマンドが欠かせません。
ng-app を宣言する要素は $rootScope の開始点となり、$rootScope はスコープチェーンのルートであり、通常はで宣言されます。
つまり、ルートの下にあるすべてのスコープがアクセスできます。
ただし、$rootScope を過度に使用することはお勧めできません。そうしないと、グローバル変数があらゆる場所に存在し、非効率になり、管理が難しくなります。
以下に例を示します:

コードをコピーしますコードは次のとおりです:

{{ someProperty }}

<スクリプト>

var myApp = angular.module('myApp', [])

.run(function($rootScope) {

$rootScope.someProperty = 'こんにちはコンピューター';

});

ng-コントローラー

このコマンドを使用して、DOM 要素にコントローラーをインストールします。
コントローラー? 確かに、文字通りに理解するのは良いことですが、なぜコントローラーが必要なのでしょうか? AngularJS 1.2.x では、次のようにコントローラーを定義できることを思い出してください...

コードをコピーしますコードは次のとおりです:

関数 ohMyController($scope) {

//...

}

このメソッドは AngularJS 1.3.x では禁止されています。このメソッドを使用するとコントローラーが空を飛び回り、すべてが $rootScope にハングされるため、レベルを区別できなくなります。

さらに、$scope は、$rootScope を含む上位の $scope のメソッドとプロパティを継承するために使用されます。
以下は単純な例です。祖先は子のスコープにアクセスできません。

コードをコピーしますコードは次のとおりです:

<スクリプト>
var myApp = angular.module('myApp', [])
.controller('ChildController', function($scope) {
$scope.childName = '子';
})
.controller('AncestorController', function($scope) {
$scope.ancestorName = '先祖';
});

スコープの問題はそれを超えて、今は脇に置いて、他の組み込み命令を見てみましょう。

NG 形式

最初はなぜ form コマンドがあるのか分かりませんでしたが、

タグは十分役に立ちそうです。
フォーム検証を例に挙げると、前の記事には次のコードがあります:

コードをコピーしますコードは次のとおりです:

つまり、フォームのステータスが $invalid の場合、送信ボタンは無効になります。
シナリオがもう少し複雑な場合、たとえば、親フォームに複数のサブフォームがあり、サブフォームの 3 つの検証に合格したときに親フォームを送信できます。
ただし、

はネストできません。
このシナリオを考慮して、ng-form ディレクティブを使用してこの問題を解決します。
例:

コードをコピーしますコードは次のとおりです:

<フォーム名="mainForm" novalidate>

名前:

ID 番号:

ガーディアン名:

ガーディアン ID 番号:

NG-無効

このような、出現している限り有効な属性については、AngularJS で true/false 式を返すことで有効にすることができます。
フォーム入力フィールドを無効にします。

コードをコピーしますコードは次のとおりです:

ng-readonly

式の戻り値 true/false を使用して、フォーム入力フィールドを読み取り専用に設定します。
例として、3 秒後に読み取り専用になります。

コードをコピーしますコードは次のとおりです:

.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})

NG チェック済み

これはなどに使用します。

コードをコピーしますコードは次のとおりです:

NG が選択されました

は、

コードをコピーしますコードは次のとおりです:

フルスタックエンジニアです

<選択>

NG-show/NG-Hide

式に基づいて HTML 要素を表示/非表示にします。これらは非表示であり、DOM から削除されないことに注意してください。例:

コードをコピーしますコードは次のとおりです:

1 1=2

あなたには私が見えません。

変更不可

HTML のような onXXX ではなく、ng-XXX です。
ng-model と組み合わせて使用されます。例として ng-change を取り上げます:

コードをコピーしますコードは次のとおりです:

{{ calc.result }}

または ng-options のようなもの

{{}}

実際、これも ng-bind と似たコマンドですが、ページのレンダリングが少し遅い場合に発生することがあります。
また、{{}} のパフォーマンスは ng-bind に比べてはるかに劣りますが、使用すると非常に便利です。

ng-バインド

ng-bind の動作は {{}} と似ていますが、このコマンドを使用して、レンダリング解除によって引き起こされるちらつきである FOUC (レンダリングされていないコンテンツのフラッシュ) を回避できる点が異なります。

NG-マント

ng-cloak も FOUC を解決してくれます。 ng-cloak は、ルートが対応するページを呼び出すまで内部要素を非表示にします。

ng-if

ng-if の式が false の場合、対応する要素は非表示ではなく DOM から削除されますが、要素を検査すると式がコメントになっていることがわかります。
フェーズが非表示の場合は、ng-hide を使用できます。

コードをコピーしますコードは次のとおりです:

要素をレビューできません 

検閲される可能性があります

ng-switch

単独で使用しても意味がありません。例を次に示します。

コードをコピーしますコードは次のとおりです:

ng-repeat

なぜ iterate と呼ばれないのかわかりません。要するに、次のように、コレクションを走査し、各要素のテンプレートインスタンスを生成します。

コードをコピーしますコードは次のとおりです:

$index

$first

$last

$middle

さえ

奇数

説明する必要はありませんが、これらが何であるかは簡単にわかります。例を示します。

コードをコピーしますコードは次のとおりです:

{{char.alphabet}}

ng-href

最初にテキストフィールドに ng-model を作成し、href に次のようにを書きました。
実際、href と ng-href の間に違いはないので、これを試すことができます:

コードをコピーコードは次のとおりです:

{{linkText}}

クリックできますが、正しいアドレスではない可能性があります

.run(function($rootScope, $timeout) {
$rootScope.linkText = 'まだロードされていないため、クリックできません';
$timeout(function() {
$rootScope.linkText = 'クリックしてください'
$rootScope.myHref = 'http://google.com';
}、2000);
})

ng-src

同様に、式が有効になる前にリソースをロードしないでください。
例 (追記: 素敵な写真です!):

コードをコピーしますコードは次のとおりです:

.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}、2000);
})

NG クラス

スコープ内のオブジェクトを使用してクラススタイルを動的に変更します。例:

コードをコピーしますコードは次のとおりです:

<スタイル>
.red {背景色: 赤;}
.blue {背景色: 青;}

番号は: {{ x }}

.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = function() {
$scope.x = new Date().getSeconds();
};
})

以上がこの記事で説明した内容のすべてです。皆さんに気に入っていただければ幸いです。