背景の紹介
この例はビデオの例であり、3つの能力、強度、速度、グローライトを備えたダイナミックなスーパーマンがあります。
これらの3つの能力は3つの属性として使用され、ダイナミックスーパーマンをタグとして定義します。対応する属性を追加することにより、この能力を持つことができます。
結果の表示を容易にするには、マウス応答イベントをタグに追加します。マウスが対応するタグに移動すると、メソッドがトリガーされて、持っている機能を印刷します。
プログラム分析
HTMLパーツのコードは次のとおりです。
<div> <superman> Nothing！</superman> <Superman Strength>強さ！</スーパーマン> <スーパーマン強度速度>強度速度！
実装方法を見てみましょう。最初のことは、モジュールを作成することです。
var myAppmodule = angular.module（ "myApp"、[]）;
このモジュールに基づいて、前のモジュールと同様のタグスーパーマンを作成します。
myAppmodule.directive（ "superman"、function（）{return {scope：{}、restrict： 'ae'、trume、テンプレート： "<div> <div ng-transclude> </div> </div>"、コントローラー：function（$ scope）{$ scope.abilities = []; $ scope.push（ "scope.ablity.push（" sped "）; console.log（scope.ability）;ここでの違いは、メソッド内にコントローラー属性があることです。これは、ng-controllerのようなコントローラーではなく、命令が外部に開かれているというインターフェイスです。内部で宣言された方法は、パブリックメソッドとして外部的に使用でき、他の命令は依存関係を通じてこれらの方法を使用できます。
次に、機能に対応する3つのコマンドを作成します
myAppmodule.directive（ "stregned"、function（）{return {require： '^superman'、link：function（scope、element、attr、supermanctrl）{supermanctrl.addstrength（）;}}}）; myAppmodule.directive（ "speed"、function（）{return {require： '^superman'、link：function（scope、element、attr、supermanctrl）{supermanctrl.addspeed（）;}}}）; myAppmodule.directive（ "light"、function（）{return {require： '^superman'、link：function（scope、element、attr、supermanctrl）{supermanctrl.addlight（）;}}}）;3つの命令のコードはほぼ同じです。必要な場合、従属指示を指定します。
リンクには追加のパラメーターSuperManctrlがあります。このパラメーターはスーパーマンのコントローラーであると推測されるため、命名方法はスーパーマン+Ctrlです。
[私は内部の原則を理解していないため、これは単なる推測ですが、このパラメーターの名前が変更された場合、エラーが報告されることを実験が証明しました。 】
これら3つの指示を宣言した後、これら3つの指示をスーパー属性として使用できます。この属性が示されると、リンク内の内部メソッドがトリガーされ、スーパーマンで開示された方法が呼び出されます。
要約すると、指示のインタラクティブなプロセス：
1最初に基本的な指令を作成し、コントローラー属性の後、公開されたメソッドを追加します。
2他のインタラクティブな命令を作成し、要求属性の後に対応する命令依存関係を追加します。リンクの露出方法を呼び出します
すべてのプログラムコード：
<！doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <divman> Nothing！ >強度速度ライト！</superman> </div> <スクリプトタイプ= "text/javascript"> var myappmodule = angular.module（ "myApp"、[]）; myAppmodule.directive（ "superman"、function（）{return {scope：{}、restrict： 'ae'、trume、テンプレート： "<div> <div ng-transclude> </div> </div>"、コントローラー：function（$ scope）{$ scope.abilities = []; $ scope.push（ "scope.ablity.push（" sped "）; console.log（scope.ability）; myAppmodule.directive（ "stregned"、function（）{return {require： '^superman'、link：function（scope、element、attr、supermanctrl）{supermanctrl.addstrength（）;}}}）; myAppmodule.directive（ "speed"、function（）{return {require： '^superman'、link：function（scope、element、attr、supermanctrl）{supermanctrl.addspeed（）;}}}）; myAppmodule.directive（ "light"、function（）{return {require： '^superman'、link：function（scope、element、attr、supermanctrl）{supermanctrl.addlight（）;}}}）; </script> </body> </html>実行結果：
上記は、AngularJS命令の相互作用に関する情報です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！