Rumah > Artikel > hujung hadapan web > Pelajari AngularJs: Penggunaan arahan arahan (versi penuh)_AngularJS

Pelajari AngularJs: Penggunaan arahan arahan (versi penuh)_AngularJS

WBOYasal: 2016-05-16 15:03:481979semak imbas

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>

Arahan innerDirective dan innerDirective2 dalam contoh di atas menggunakan semula kaedah yang ditakrifkan dalam pengawal arahan outerDirective

juga menerangkan dengan lebih lanjut bahawa pengawal dalam arahan digunakan untuk berkomunikasi antara arahan yang berbeza.

Selain itu, kami boleh menambah salah satu awalan berikut pada nilai parameter yang diperlukan, yang akan mengubah tingkah laku pengawal carian:

(1) Tanpa awalan, arahan akan mencari dalam pengawal yang disediakan dengan sendirinya Jika tiada pengawal ditemui, ralat akan dilemparkan

(2)? Jika pengawal yang diperlukan tidak ditemui dalam arahan semasa, null akan dihantar ke parameter keempat fungsi sambungan pautan

(3)^Jika pengawal yang diperlukan tidak ditemui dalam arahan semasa, pengawal elemen induk akan dicari

(4)?^ Gabungan

12.Proses penyusunan arahan Anguar
Mula-mula muatkan pustaka angularjs dan cari arahan ng-app untuk mencari sempadan aplikasi,

Panggil perkhidmatan $compile untuk penyusunan mengikut skop yang ditakrifkan oleh ng-app Angularjs akan merentasi keseluruhan dokumen HTML dan memproses setiap arahan yang diisytiharkan pada halaman mengikut definisi arahan dalam js mengikut keutamaan. arahan. ) , tukarkan DOM mengikut parameter konfigurasi (template, tempat, transclude, dll.) dalam arahan dan kemudian mula melaksanakan fungsi kompil setiap arahan mengikut urutan (jika fungsi kompil ditakrifkan pada arahan) untuk menukar templat itu sendiri

Nota: Fungsi kompil di sini dikonfigurasikan dalam arahan kami, yang berbeza daripada perkhidmatan $compile yang disebutkan di atas. Selepas setiap fungsi penyusunan dilaksanakan, ia akan mengembalikan fungsi pautan, dan semua fungsi pautan akan disintesis menjadi satu fungsi pautan besar

Kemudian fungsi pautan besar ini akan dilaksanakan, terutamanya untuk pengikatan data, dengan mendaftarkan pendengar pada DOM untuk mengubah suai data dalam skop secara dinamik, atau menggunakan $watchs untuk mendengar pembolehubah dalam skop untuk mengubah suai DOM, dengan itu Cipta pengikatan dua hala dan banyak lagi. Jika fungsi penyusunan tidak dikonfigurasikan dalam arahan kami, fungsi pautan yang kami konfigurasikan akan dijalankan secara lebih kurang sama dengan fungsi pautan besar yang disintesis oleh semua fungsi pautan selepas kompilasi kembali di atas.

Jadi: pilihan kompilasi dan pautan dalam perintah adalah saling eksklusif Jika kedua-dua pilihan ini ditetapkan pada masa yang sama, fungsi yang dikembalikan oleh kompilasi akan dianggap sebagai fungsi pautan, dan pilihan pautan itu sendiri akan diabaikan<.>

13. Fungsi Kompilasi Fungsi kompilasi

fungsi menyusun(tElement, tAttrs, transclude) { ... }

Fungsi yang disusun digunakan untuk mengendalikan situasi di mana templat DOM perlu diubah suai. Oleh kerana kebanyakan arahan tidak memerlukan pengubahsuaian templat, fungsi ini tidak biasa digunakan. Contoh yang perlu digunakan termasuk ngTrepeat, yang memerlukan pengubahsuaian templat, dan ngView, yang memerlukan pemuatan kandungan tak segerak. Fungsi yang disusun menerima parameter berikut.

tElement - elemen templat - Elemen tempat arahan terletak. Adalah selamat untuk melakukan operasi seperti transformasi pada elemen ini dan anak-anaknya.

tAttrs - atribut templat - atribut yang diisytiharkan oleh semua arahan pada elemen ini. Atribut ini dikongsi di antara fungsi yang disusun.
transclude - fungsi fungsi memaut terbenam (skop, cloneLinkingFn).
Nota: Jangan lakukan sebarang operasi selain daripada transformasi DOM dalam fungsi yang disusun. Lebih penting lagi, pendaftaran acara mendengar DOM harus dilakukan dalam fungsi pautan, bukan fungsi yang disusun.
Fungsi yang disusun boleh mengembalikan objek atau fungsi.
Mengembalikan fungsi - bersamaan dengan fungsi pautan yang didaftarkan menggunakan atribut pautan objek konfigurasi apabila fungsi yang disusun tidak wujud.
Return Object - Mengembalikan objek dengan fungsi yang didaftarkan melalui atribut pra atau pasca. Lihat penjelasan fungsi prapautan dan pasca suka di bawah.

14. Fungsi memautkan

pautan fungsi(skop, iElement, iAttrs, pengawal) { ... }

Fungsi pautan bertanggungjawab untuk mendaftarkan acara DOM dan mengemas kini DOM. Ia dilaksanakan selepas templat diklon dan merupakan tempat kebanyakan logik arahan ditulis.
skop - skop arahan perlu mendengar.
iElement - elemen instance - Elemen di mana arahan terletak. Ia hanya selamat untuk beroperasi pada anak elemen dalam fungsi postLink, kerana kemudian mereka semua dipautkan.
iAttrs - atribut instance - Senarai piawai bagi semua atribut yang diisytiharkan pada elemen semasa Atribut ini dikongsi di antara semua fungsi pautan.
pengawal - contoh pengawal, iaitu pengawal di dalam direct2 yang diminta oleh arahan semasa. Contohnya: controller:function(){this.addStrength = function(){}} dalam arahan direct2, kemudian dalam fungsi pautan arahan semasa, anda boleh memanggilnya melalui controller.addStrength.
Fungsi pra-pautan dilaksanakan sebelum elemen anak dipautkan. Ia tidak boleh digunakan untuk mengubah DOM sekiranya fungsi pautan tidak dapat mencari elemen yang betul untuk dipautkan.
Fungsi pasca pautan dilaksanakan selepas semua elemen dipautkan.

Arahan:

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 der Verwendung von AngularJs:Directive-Anweisungen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Tetapkan Nodejs NPM global path_node.js di bawah sistem WindowsArtikel seterusnya：Tetapkan Nodejs NPM global path_node.js di bawah sistem Windows

Artikel berkaitan

Lihat lagi