angularjs中的directive

编程爱好者联盟 2016-11-22

正在初学angularjs中,在网上看到一篇详细讲解directive指令的文章,于是就记录在这里和大家一起分享

angular.module('docsTransclusionExample', []).controller('Controller', ['$scope', function($scope) {  $scope.name = 'Tobias';}]).directive('myDialog', function() {  return {    restrict: 'E',    transclude: true,    scope: {},    templateUrl: 'my-dialog.html',    link: function (scope, element) {      scope.name = 'Jeff';    }  };});

1.restrict E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog> A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div> EA: 表示该directive既能以element方式使用,也能以attribute方式使用

2.transcludedirective可能接受页面上的其他html内容时才会用到,建议先去掉该参数。有些高阶了。

3.scope 当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个

4.templateUrl 你的directive里的html内容

5.link 可以简单理解为,当directive被angular 编译后,执行该方法.link中的第一个参数scope基本上就是上面写的那个scope

6.element简单说就是$('my-dialog')

attrs是个map,内容是你这个directive上的所有属性,例如:你在页面上如果这样写了directive:

<my-dialog type="modal" animation="fade"></my-dialog>

attrs就是: { type: 'modal', animation: 'fade' }

相关推荐