Angularjs学习记录之directive

首先给出一段代码：

angular.module('docstransclusionexample',[])

.controller('controller', ['$scope', function($scope) {

  $scope.name = 'tobias';

}])

.directive('mydialog', function(){

  return {

    restrict: 'e',

    transclude: true,

    scope: {

    summary: '='

},

    templateurl: 'my-dialog.html',

    link: function (scope,element) {

      scope.name = 'jeff';

    }

  };

}); 

解释： 

directive中的几个属性：

restrict

e：表示该directive仅能以element方式使用，即：<my-dialog></my-dialog>

a：表示该directive仅能以attribute方式使用，即：<p my-dialog></p>

ea: 表示该directive既能以element方式使用，也能以attribute方式使用

transclude

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

scope

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

templateurl

你的directive里的html内容

link

可以简单理解为，当directive被angular 编译后，执行该方法

引用 directive的方法：在html中<my-dialog summary="summary"></my-dialog>

注意要把scope里面的数据summary加上，不然数据不能正常显示。