angularjs中的directive

Posted 2020-08-20

正在初学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.transclude
directive可能接受页面上的其他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‘
}