angularjs directive属性解析

  1. 代码样例

    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';
        }
      };
    });
  2. restrict

    • E: 表示该directive仅能以element方式使用,即:
    • A: 表示该directive仅能以attribute方式使用,即:
    • EA: 表示该directive既能以element方式使用,也能以attribute方式使用
  3. transclude
    你的directive可能接受页面上的其他html内容时才会用到,建议你先去掉该参数。有些高阶了。

  4. scope
    当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。
  5. templateUrl
    你的directive里的html内容
  6. link:function(scope,element,attr,ctrl,linker)
    可以简单理解为,当directive被angular 编译后,执行该方法

    • scope:指令所在的作用域
    • element:指令元素的封装,可以调用angular封装的简装jq方法和属性
    • attr:指令元素的属性的集合,例如:你在页面上如果这样写了directive:

      那attrs就是:

      {
      type: 'modal',
      animation: 'fade'
      }
    • ctrl:用于调用其他指令的方法,指令之间的互相通信使用,需要配合require
    • linker:用于transClude里面嵌入的内容

参考链接

  1. https://segmentfault.com/q/1010000002400734
  2. http://blog.csdn.net/qq_30100043/article/details/53181673

你可能感兴趣的:(angularjs)