Heim > Artikel > Web-Frontend > Lernen Sie AngularJs: Verwendung von Direktivenanweisungen (Vollversion)_AngularJS

Lernen Sie AngularJs: Verwendung von Direktivenanweisungen (Vollversion)_AngularJS

WBOYOriginal: 2016-05-16 15:03:481967Durchsuche

Tutorial ini menggunakan versi AngularJs: 1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

Alamat muat turun AngularJs: https://angularjs.org/

Ringkasan: Arahan (arahan) Saya rasa ialah salah satu fungsi AngularJ yang sangat berkuasa dan berguna. Ia bersamaan dengan menulis elemen DOM tersuai awam atau atribut CLASS atau atribut ATTR untuk kami, dan bukan itu sahaja, anda juga boleh mengendalikan skop, mengikat acara, menukar gaya, dsb. berdasarkannya. Melalui Arahan ini, kami boleh merangkum banyak arahan awam, seperti arahan paging, arahan auto-lengkap, dsb. Kemudian anda hanya perlu menulis satu baris kod dalam halaman HTML untuk mencapai banyak fungsi yang berkuasa. Secara umumnya, Arahan perlu digunakan dalam situasi berikut:
1. Jadikan Html anda lebih semantik, dan anda boleh mengetahui logik umum halaman tanpa menyelidiki kod dan logik.
2. Abstrak komponen tersuai dan gunakan semula di tempat lain.

1. Definisi Arahan dan cara menggunakannya
Takrifan arahan AngularJs adalah lebih kurang seperti berikut

angular.module("app",[]).directive("directiveName",function(){ 
 return{ 
 //通过设置项来定义 
 }; 
})

Arahan boleh diletakkan dalam nama elemen, atribut, kelas dan ulasan. Berikut ialah cara yang sama untuk merujuk arahan myDir. (Tetapi banyak arahan terhad kepada penggunaan "atribut")

<span <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span><span style="font-family: Arial, Helvetica, sans-serif;">="exp"></span>//属性</span> 
 
<span class="<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>: exp;"></span>//class 
 
<<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>>//元素 
 
<!-- directive: <span style="font-family: Arial, Helvetica, sans-serif;">directive-name </span><span style="font-family: Arial, Helvetica, sans-serif;">exp -->//注释</span>

Berikut ialah contoh:

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div>Hi 我是林炳文~~~</div>', 
 replace: true 
 }; 
}); 
</script> 
</html>

Hasil:

Berikut ialah versi terperinci arahan

var myModule = angular.module(...); 
 
myModule.directive('directiveName', function factory(injectables) { 
 
 var directiveDefinitionObject = { 
 
 　　priority: 0, 
 
 　　template: '<div></div>', 
 
 　　templateUrl: 'directive.html', 
 
 　　replace: false, 
 
 　　transclude: false, 
 
 　　restrict: 'A', 
 
 　　scope: false, 
 
 　　compile: function compile(tElement, tAttrs, transclude) { 
 
 　　　　return { 
 
 　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
 
 　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... } 
 
　　　　} 
 
　　}, 
 
 　　link: function postLink(scope, iElement, iAttrs) { ... } 
 
}; 
 
 return directiveDefinitionObject; 
 
});

2. Tafsiran kandungan Arahan
Anda boleh melihat bahawa ia mempunyai 8 kandungan
1.sekat
(String) parameter pilihan, menunjukkan dalam bentuk apa arahan diisytiharkan dalam DOM, nilainya ialah: E (elemen), A (atribut), C (kelas), M (komen), di mana nilai lalai ialah A ; sudah tentu Anda juga boleh menggunakan dua bersama-sama, seperti EA Perwakilan boleh sama ada elemen atau atribut.
[html] lihat salinan biasa Lihat coretan kod pada KOD yang diperolehi daripada coretan kod saya
E (elemen): 3d2e5ffc584136bb402056fc25c74042fd34349817ec1e88fe5ef4ceedb13309 A (atribut):6eac651395124439dad6853c8943e57316b28748ea4df4d9c2150843fecfba68 C (kelas): c9319480cb6dde66254d6e5a18255f6c16b28748ea4df4d9c2150843fecfba68 M (komen): 2e0c811c1cfc02c29f706a4b83403625
Secara amnya, E/A/C lebih banyak digunakan.

2.keutamaan
(nombor), parameter pilihan, menunjukkan keutamaan arahan Jika terdapat berbilang arahan pada satu DOM, arahan yang mempunyai keutamaan yang lebih tinggi akan dilaksanakan terlebih dahulu
3.terminal

(Boolean), parameter pilihan, boleh ditetapkan kepada benar atau palsu Jika ditetapkan kepada benar, arahan lain dengan keutamaan yang lebih rendah daripada arahan ini akan menjadi tidak sah dan tidak akan dipanggil (yang mempunyai keutamaan yang sama Ia. akan tetap dilaksanakan)
4.template (rentetan atau fungsi) parameter pilihan, yang boleh menjadi:

(1) Sekeping teks HTML

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
 replace: true 
 }; 
}); 
</script> 
</html>

(2) Fungsi yang menerima dua parameter tElement dan tAttrs

Antaranya, tElement merujuk kepada elemen yang menggunakan arahan ini, dan tAttrs ialah atribut instance Ia adalah koleksi (objek) yang terdiri daripada semua atribut pada elemen, seperti: 4700bbce5bc79a902519a51cf7732abb1e1283272b9f904b0d566db0f51327df Di mana tajuk adalah atribut pada tattrs

Mari kita lihat apa yang berlaku apabila templat ialah fungsi

Hasil:

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
<hello-world2 title = '我是第二个directive'></hello-world2> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
 replace: true 
 }; 
}); 
app.directive("helloWorld2",function(){ 
 return{ 
 restrict:'EAC', 
 template: function(tElement,tAttrs){ 
 var _html = ''; 
 _html += '<div>' +'hello '+tAttrs.title+'</div>'; 
 return _html; 
 } 
 }; 
 }); 
</script> 
</html>

Anda boleh melihat bahawa medan tajuk dalam teg dalam hello-world2 juga digunakan dalam arahan

5.templateUrl (rentetan atau fungsi), parameter pilihan, boleh menjadi

(1) Rentetan yang mewakili laluan fail HTML (2) Fungsi yang menerima dua parameter tElement dan tAttrs (kira-kira sama seperti di atas)
Nota: Apabila membangun secara setempat, anda perlu menjalankan pelayan, jika tidak menggunakan templateUrl akan melaporkan ralat Cross Origin Request Skrip (CORS). Memandangkan templat HTML dimuatkan secara tidak segerak, memuatkan sebilangan besar templat akan melambatkan tapak web Berikut ialah helah, iaitu untuk cache templat dahulu Anda boleh memasukkan kod berikut sebagai sebahagian daripada halaman anda selepas halaman indeks anda dimuatkan.

这里的id属性就是被设置在templateUrl上用的。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 templateUrl: 'hello.html', 
 replace: true 
 }; 
}); 
</script> 
<script type='text/ng-template' id='hello.html'> 
 <div><h1>Hi 我是林炳文~~~</h1></div> 
</script> 
</html>

输出结果：

另一种办法缓存是:

app.run(["$templateCache", function($templateCache) { 
 $templateCache.put("hello.html", 
 "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
}]);

使用实例如下：

 
 
 
  
 AngularJS入门学习

结果：

其实第一种方法还好一些，写起来会比较快，笔者就得最多的也是第一种写法，直接包在scprit当中

6.replace
（布尔值），默认值为false，设置为true时候，我们再来看看下面的例子（对比下在template时候举的例子）

replace为true时，hello-world这个标签不在了，反之，则存在。

7.scope
（1）默认值false。表示继承父作用域;

（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;

（3）{}。表示创建一个全新的隔离作用域；

7.1首先我们先来了解下scope的继承机制。我们用ng-controller这个指令举例，

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller='MainController'> 
 父亲:{{name}}<input ng-model="name" /> 
 <div my-directive></div> 
 </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller('MainController', function ($scope) { 
 $scope.name = '林炳文'; 
}); 
app.directive('myDirective', function () { 
 return { 
 restrict: 'EA', 
 scope:false, 
 template: '<div>儿子:{{ name }}<input ng-model="name"/></div>' 
 }; 
}); 
</script> 
</html>

接下来我们通过一个简单明了的例子来说明scope取值不同的差别：

scope:false

scope:true

scope:{}

当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）

当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）

当为{}时候，没有继承父亲的值，所以儿子的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）

tip：当你想要创建一个可重用的组件时隔离作用域是一个很好的选择，通过隔离作用域我们确保指令是‘独立'的,并可以轻松地插入到任何HTML app中，并且这种做法防止了父作用域被污染；
7.2隔离作用域可以通过绑定策略来访问父作用域的属性。
directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

@ 局部 scope 属性

@ 方式局部属性用来访问 directive 外部环境定义的字符串值，主要是通过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，而隔离 scope 中的绑定变化，父 scope 是不知道的。

如下示例：directive 声明未隔离 scope 类型，并且使用@绑定 name 属性，在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候，directive 会同步更新值，当改变 directive 的 scope 的属性值时，父 scope 无法同步更新值。

js 代码：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
 <div class="result"> 
 <div>父scope： 
 <div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name"/></div> 
 </div> 
 <div>隔离scope： 
 <div isolated-directive name="{{name}}"></div> 
 </div> 
 <div>隔离scope（不使用父scope {{name}}）： 
 <div isolated-directive name="name"></div> 
 </div> 
 </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.name = "hello world"; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 name: "@" 
 }, 
 template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">' 
 }; 
}); 
</script> 
</html>

结果：页面初始效果

动画效果：

可以看到父scope上的内容发生改变，子scope同时发生改变。而子scope上的内容发生改变。不影响父scope上的内容！

= 局部 scope 属性

= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
意思是，当你想要一个双向绑定的属性的时候，你可以使用=来引入外部属性。无论是改变父 scope 还是隔离 scope 里的属性，父 scope 和隔离 scope 都会同时更新属性值，因为它们是双向绑定的关系。

示例代码：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
 <div>父scope： 
 <div>Say：{{user.name}}<br>改变父scope的name：<input type="text" value="" ng-model="userBase.name"/></div> 
 </div> 
 <div>隔离scope： 
 <div isolated-directive user="userBase"></div> 
 </div> 
</div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.userBase = { 
 name: 'hello', 
 id: 1 
 }; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 user: "=" 
 }, 
 template: 'Say：{{user.name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="user.name"/>' 
 } 
 }) 
</script> 
</html>

效果：

可以看到父scope和子scope上的内容一直都是一样的！
& 局部 scope 属性

& 方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。
比如当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 无法知道 directive 中发生了什么，也许你可以通过使用 angular 中的 event 广播来做到，但是必须要在 controller 中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function，当 directive 中有什么动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数。

如下示例在 directive 中执行父 scope 的 function。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
 <div ng-controller="myController"> 
 <div>父scope： 
 <div>Say：{{value}}</div> 
 </div> 
 <div>隔离scope： 
 <div isolated-directive action="click()"></div> 
 </div> 
</div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.value = "hello world"; 
 $scope.click = function () { 
 $scope.value = Math.random(); 
 }; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 action: "&" 
 }, 
 template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>' 
 } 
 }) 
</script> 
</html>

效果：

指令的内容比较多，下面再来讲讲transclude、compline、link、contrller

8.transclude
如果不想让指令内部的内容被模板替换，可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用。比如：template:"dc6dce4a544fdca2df29d5ac0ea9906bhello every 144e86f8e6a2df8d24469044d39968c016b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68"，这时，指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了dc6dce4a544fdca2df29d5ac0ea9906bhello every dc6dce4a544fdca2df29d5ac0ea9906b这是指令内部的内容16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68。默认值为false；这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当你开启transclude后，你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<div sidebox title="Links"> 
  <ul> 
  <li>First link</li> 
  <li>Second link</li> 
  </ul> 
</div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('sidebox', function() { 
 return { 
 restrict: 'EA', 
 scope: { 
  title: '@' 
 }, 
 transclude: true, 
 template: '<div class="sidebox">\ 
  <div class="content">\ 
  <h2 class="header">{{ title }}</h2>\ 
  <span class="content" ng-transclude>\ 
  </span>\ 
  </div>\ 
 </div>' 
 }; 
}); 
</script> 
</html>

结果：

当 transclude: false,时

如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。
9.controller
可以是一个字符串或者函数。

若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数

angular.module('myApp', []) 
.directive('myDirective', function() { 
restrict: 'A', // 始终需要 
controller: 'SomeController' 
}) 
// 应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件 
angular.module('myApp') 
.controller('SomeController', function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里 
}); 
也可以直接在指令内部的定义为匿名函数，同样我们可以再这里注入任何服务（$log,$timeout等等）

[html] view plain copy 在CODE上查看代码片派生到我的代码片
angular.module('myApp',[]) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里 
} 
});

另外还有一些特殊的服务（参数）可以注入

（1）$scope，与指令元素相关联的作用域

（2）$element，当前指令对应的元素

（3）$attrs，由当前元素的属性组成的对象

（4）$transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数

注意： 除非是用来定义一些可复用的行为，一般不推荐在这使用。
指令的控制器和link函数（后面会讲）可以进行互换。区别在于，控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为，且无法再指令间复用。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
 <hello mycolor ="red">我是林炳文~~~</hello> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('hello', function() { 
 return { 
  restrict: 'EA', 
  transclude: true, //注意此处必须设置为true 
  controller: 
  function ($scope, $element,$attrs,$transclude,$log) { //在这里你可以注入你想注入的服务 
  $transclude(function (clone) { 
   var a = angular.element('<p>'); 
   a.css('color', $attrs.mycolor); 
   a.text(clone.text()); 
   $element.append(a); 
  }); 
  $log.info("hello everyone"); 
  } 
 }; 
 }); 
</script> 
</html>

输出结果：

并且在控制台下输出hello everyone

让我们看看$transclude();在这里，它可以接收两个参数，第一个是$scope，作用域，第二个是带有参数clone的回调函数。而这个clone实际上就是嵌入的内容（经过jquery包装），可以在它上做很多DOM操作。

它还有最简单的用法就是

<script> 
 angular.module('myApp',[]).directive('mySite', function () { 
 return { 
  restrict: 'EA', 
  transclude: true, 
  controller: 
  function ($scope, $element,$attrs,$transclude,$log) { 
  var a = $transclude(); //$transclude()就是嵌入的内容 
  $element.append(a); 
  } 
 }; 
 }); 
 </script>

注意：使用$transclude会生成一个新的作用域。
默认情况下，如果我们简单实用$transclude()，那么默认的其作用域就是$transclude生成的作用域

但是如果我们实用$transclude($scope,function(clone){}),那么作用域就是directive的作用域了

那么问题又来了。如果我们想实用父作用域呢

可以使用$scope.$parent

同理想要一个新的作用域也可以使用$scope.$parent.new()；
10.controllerAs
这个选项的作用是可以设置你的控制器的别名

一般以前我们经常用这样方式来写代码：

angular.module("app",[]) 
 .controller("demoController",["$scope",function($scope){ 
 $scope.title = "angualr"; 
 }]) 
 
 <div ng-app="app" ng-controller="demoController"> 
 {{title}} 
</div>

后来angularjs1.2给我们带来新语法糖，所以我们可以这样写

angular.module("app",[]) 
 .controller("demoController",[function(){ 
 this.title = "angualr"; 
 }]) 
 
 <div ng-app="app" ng-controller="demoController as demo"> 
 {{demo.title}} 
 </div>

同样的我们也可以再指令里面也这样写

<script> 
 angular.module('myApp',[]).directive('mySite', function () { 
 return { 
  restrict: 'EA', 
  transclude: true, 
  controller:'someController', 
  controllerAs:'mainController' 
  //..其他配置 
 }; 
 }); 
 </script>

11.require(字符串或者数组)
字符串代表另一个指令的名字，它将会作为link函数的第四个参数。具体用法我们可以举个例子说明。假设现在我们要编写两个指令，两个指令中的link链接函数中（link函数后面会讲）存在有很多重合的方法，这时候我们就可以将这些重复的方法写在第三个指令的controller中（上面也讲到controller经常用来提供指令间的复用行为）然后在这两个指令中，require这个拥有controller字段的的指令（第三个指令），

最后通过link链接函数的第四个参数就可以引用这些重合的方法了。

<!doctype html> 
<html ng-app="myApp"> 
<head> 
 <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> 
</head> 
<body> 
 
  
 <outer-directive> 
 <inner-directive></inner-directive> 
 <inner-directive2></inner-directive2> 
 </outer-directive> 
 <script> 
 var app = angular.module('myApp', []); 
 app.directive('outerDirective', function() { 
  return { 
  scope: {}, 
  restrict: 'AE', 
  controller: function($scope) { 
   this.say = function(someDirective) { 
   console.log('Got:' + someDirective.message); 
   }; 
  } 
  }; 
 }); 
 app.directive('innerDirective', function() { 
  return { 
  scope: {}, 
  restrict: 'AE', 
  require: '^outerDirective', 
  link: function(scope, elem, attrs, controllerInstance) { 
   scope.message = "Hi,leifeng"; 
   controllerInstance.say(scope); 
  } 
  }; 
 }); 
 app.directive('innerDirective2', function() { 
  return { 
  scope: {}, 
  restrict: 'AE', 
  require: '^outerDirective', 
  link: function(scope, elem, attrs, controllerInstance) { 
   scope.message = "Hi,shushu"; 
   controllerInstance.say(scope); 
  } 
  }; 
 }); 
 
 
 </script> 
 
</body> 
</html>

Die Anweisungen innerDirective und innerDirective2 im obigen Beispiel verwenden die im Controller der Anweisung OuterDirective definierte Methode wieder

erklärt außerdem weiter, dass der Controller in der Anweisung zur Kommunikation zwischen verschiedenen Anweisungen verwendet wird.

Darüber hinaus können wir dem erforderlichen Parameterwert eines der folgenden Präfixe hinzufügen, was das Verhalten des Suchcontrollers ändert:

(1) Ohne Präfix sucht die Anweisung im von ihr bereitgestellten Controller. Wenn kein Controller gefunden wird, wird ein Fehler ausgegeben

(2)? Wenn der erforderliche Controller in der aktuellen Anweisung nicht gefunden wird, wird null an den vierten Parameter der Link-Verbindungsfunktion

übergeben

(3)^Wenn der erforderliche Controller in der aktuellen Direktive nicht gefunden wird, wird nach dem Controller des übergeordneten Elements gesucht

(4)?^ Kombination

12.Anguar-Anweisungserstellungsprozess
Laden Sie zuerst die AngularJS-Bibliothek und suchen Sie die NG-App-Direktive, um die Grenzen der Anwendung zu ermitteln,

Rufen Sie den $compile-Dienst zur Kompilierung gemäß dem von ng-app definierten Bereich auf, um das gesamte HTML-Dokument zu durchlaufen und jede auf der Seite deklarierte Anweisung gemäß der Definition der Anweisung in js entsprechend der Priorität zu verarbeiten Anweisung)-Anordnung, konvertieren Sie das DOM gemäß den Konfigurationsparametern (Vorlage, Ort, Transclude usw.) in der Anweisung und beginnen Sie dann mit der Ausführung der Kompilierungsfunktion jeder Anweisung (sofern die Kompilierungsfunktion in der Anweisung definiert ist). um die Vorlage selbst zu konvertieren

Hinweis: Die Kompilierungsfunktion wird hier in unseren Anweisungen konfiguriert und unterscheidet sich vom oben erwähnten $compile-Dienst. Nachdem jede Kompilierungsfunktion ausgeführt wurde, gibt sie eine Link-Funktion zurück und alle Link-Funktionen werden zu einer großen Link-Funktion

zusammengefasst

Dann wird diese große Link-Funktion ausgeführt, hauptsächlich für die Datenbindung, indem ein Listener im DOM registriert wird, um die Daten im Bereich dynamisch zu ändern, oder $watchs verwendet wird, um die Variablen im Bereich abzuhören und das DOM zu ändern. Erstellen Sie so bidirektionale Bindungen und mehr. Wenn die Kompilierungsfunktion in unseren Anweisungen nicht konfiguriert ist, wird die von uns konfigurierte Link-Funktion ausgeführt, was ungefähr der großen Link-Funktion entspricht, die von allen Link-Funktionen synthetisiert wird, nachdem die Kompilierung oben erfolgt ist.

Also: Die Kompilierungs- und Link-Optionen im Befehl schließen sich gegenseitig aus. Wenn diese beiden Optionen gleichzeitig festgelegt werden, wird die von der Kompilierung zurückgegebene Funktion als Link-Funktion betrachtet und die Link-Option selbst wird ignoriert 🎜>

13. Kompilierungsfunktion Kompilierungsfunktion

Funktion compilieren(tElement, tAttrs, transclude) { ... 🎜> Die kompilierte Funktion wird verwendet, um Situationen zu behandeln, in denen das Vorlagen-DOM geändert werden muss. Da für die meisten Anweisungen keine Änderung der Vorlage erforderlich ist, wird diese Funktion nicht häufig verwendet. Beispiele, die verwendet werden müssen, sind ngTrepeat, das eine Änderung der Vorlage erfordert, und ngView, das ein asynchrones Laden von Inhalten erfordert. Die kompilierte Funktion akzeptiert die folgenden Parameter.

tElement – Vorlagenelement – Das Element, in dem sich die Direktive befindet. Es ist sicher, Vorgänge wie Transformationen für dieses Element und seine untergeordneten Elemente durchzuführen.

tAttrs – Vorlagenattribute – Attribute, die von allen Anweisungen für dieses Element deklariert werden. Diese Attribute werden von den kompilierten Funktionen gemeinsam genutzt.

transclude – eine eingebettete Verknüpfungsfunktion (scope, cloneLinkingFn).
Hinweis: Führen Sie in der kompilierten Funktion keine anderen Vorgänge als die DOM-Transformation durch. Noch wichtiger ist, dass die Registrierung von DOM-Listening-Ereignissen in der Link-Funktion und nicht in der kompilierten Funktion erfolgen sollte.
Kompilierte Funktionen können ein Objekt oder eine Funktion zurückgeben.
Gibt eine Funktion zurück – äquivalent zur Link-Funktion, die über das Link-Attribut des Konfigurationsobjekts registriert wurde, wenn die kompilierte Funktion nicht vorhanden ist.
Rückgabeobjekt – Gibt ein Objekt mit einer über das Pre- oder Post-Attribut registrierten Funktion zurück. Nachfolgend finden Sie die Erläuterung der Pre-Linking- und Post-Liking-Funktionen.

14. Verknüpfungsfunktion Funktionslink(scope, iElement, iAttrs, Controller) { ... }

Die Link-Funktion ist für die Registrierung von DOM-Ereignissen und die Aktualisierung des DOM verantwortlich. Es wird nach dem Klonen der Vorlage ausgeführt und ist dort, wo der Großteil der Direktivenlogik geschrieben wird.

Geltungsbereich – der Geltungsbereich, auf den die Richtlinie achten muss.
iElement – Instanzelement – Das Element, in dem sich die Anweisung befindet. Es ist nur sicher, die untergeordneten Elemente eines Elements in der postLink-Funktion zu bearbeiten, da sie dann alle verknüpft sind.
iAttrs – Instanzattribute – Instanzattribute, eine standardisierte Liste aller für das aktuelle Element deklarierten Attribute. Diese Attribute werden von allen Linkfunktionen gemeinsam genutzt.
Controller – die Controller-Instanz, bei der es sich um den Controller innerhalb von Direct2 handelt, den die aktuelle Anweisung über „require“ anfordert. Beispiel: controller:function(){this.addStrength = function(){}} in der Direct2-Anweisung, dann können Sie sie in der Link-Funktion der aktuellen Anweisung über controller.addStrength aufrufen.
Die Vorverknüpfungsfunktion wird ausgeführt, bevor untergeordnete Elemente verknüpft werden. Es kann nicht zur Transformation des DOM verwendet werden, falls die Link-Funktion das richtige Element zum Verknüpfen nicht finden kann.
Die Post-Linking-Funktion wird ausgeführt, nachdem alle Elemente verknüpft sind.

Anleitung:

Die Kompilierungsoption selbst wird nicht häufig verwendet, die Link-Funktion jedoch häufig. Wenn wir die Link-Option festlegen, erstellen wir im Wesentlichen eine PostLink()-Link-Funktion, damit die Compile()-Funktion die Link-Funktion definieren kann. Wenn die Kompilierungsfunktion festgelegt ist, bedeutet dies normalerweise, dass wir DOM-Operationen ausführen möchten, bevor Anweisungen und Echtzeitdaten im DOM platziert werden. Es ist sicher, DOM-Operationen wie das Hinzufügen und Löschen von Knoten in dieser Funktion auszuführen. Die Optionen zum Kompilieren und Verknüpfen schließen sich gegenseitig aus. Wenn beide Optionen festgelegt sind, wird die von der Kompilierung zurückgegebene Funktion als Link-Funktion behandelt und die Link-Option selbst wird ignoriert. Die Übersetzungsfunktion ist für die Konvertierung des Vorlagen-DOM verantwortlich. Die Link-Funktion ist für die Verknüpfung des Bereichs mit dem DOM verantwortlich. Sie können das DOM manuell bearbeiten, bevor der Bereich mit dem DOM verknüpft wird. In der Praxis kommt diese Art von Operation beim Schreiben benutzerdefinierter Direktiven sehr selten vor, es gibt jedoch mehrere integrierte Direktiven, die eine solche Funktionalität bereitstellen. Linkfunktionen sind optional. Wenn eine Kompilierungsfunktion definiert ist, gibt sie die Link-Funktion zurück. Wenn also beide Funktionen definiert sind, überlastet die Kompilierungsfunktion die Link-Funktion. Wenn unsere Direktive einfach ist und keine zusätzliche Einrichtung erfordert, können wir anstelle des Objekts eine Funktion aus der Factory-Funktion (Callback-Funktion) zurückgeben. Wenn Sie dies tun, handelt es sich bei der Funktion um eine Linkfunktion.

Nachdruck aus diesem Artikelhttp://blog.csdn.net/evankaka

Das Obige ist der gesamte Inhalt von AngularJs: Verwendung von Direktivenanweisungen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Legen Sie Nodejs NPM global path_node.js unter dem Windows-System festNächster Artikel：Legen Sie Nodejs NPM global path_node.js unter dem Windows-System fest

In Verbindung stehende Artikel

Mehr sehen