AngularJS 組み込みディレクティブ_AngularJS

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

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

組み込みコマンド

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

NG モデル

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

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

{{someModel.someProperty}}

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 のメソッドとプロパティを継承するために使用されます。
以下は単純な例です。祖先は子のスコープにアクセスできません。

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

{{ 先祖名 }}
{{ childName }}

{{ 先祖名 }}
{{ childName }}

<スクリプト>
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 式を返すことで有効にすることができます。
フォーム入力フィールドを無効にします。

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

1 1=?

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

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

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

0

1

2

3

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();
};
})

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