$directive()方法包含2个参数
1 name 视图中的元素
2 function 决定directive怎样的作用，返回一个object
restrict : E/A/C/M 绑定元素的类型 E element A attribute C class M comment
priority:如果同一个元素绑定2个directive，那么可以在这里设置优先级
terminal：boolean 更高优先级的directive会被停止，同等优先级的会被执行
template: 返回的string
replace :是否去掉外层wrap
controller 内置的控制器
简单例子：
<!DOCTYPE html> <html ng-app="demo"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> </head> <body> <div my-Directive></div> </body> <script> var demo = angular.module("demo", []); demo.controller("demoController", function ($scope) { }); demo.directive("myDirective", function () { return { restrict: "A", replace: true, controller: function ($scope) { $scope.name = "click me"; }, template: "<a href='http://google.com'>{{name}}</a>" }; }); </script> </html>
directive 与DOM交互的理解可以通过scope来传递
<!DOCTYPE html> <html ng-app="demo"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> </head> <body> <div my-Directive my-Url="http://google.com" my-Text="click me"></div> </body> <script> var demo = angular.module("demo", []); demo.controller("demoController", function ($scope) { }); demo.directive("myDirective", function () { return { restrict: "A", replace: true, controller: function ($scope) { //$scope.name = "click meee"; }, scope:{ myUrl:"@", myText:"@" }, template: "<a href='{{myUrl}}'>{{myText}}</a>" }; }); </script> </html>
再看另外一个例子
<!DOCTYPE html> <html ng-app="demo"> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> </head> <body> <input type="text" ng-model="theirUrl" /> <div my-Directive my-Url="http://google.com" my-Text="click me" some-Attr="theirUrl"></div> </body> <script> var demo = angular.module("demo", []); demo.controller("demoController", function ($scope) { }); demo.directive("myDirective", function () { return { restrict: "A", replace: true, controller: function ($scope) { //$scope.name = "click meee"; }, scope:{ myUrl:"=someAttr",//modified myText:"@" }, template: "<a href='{{myUrl}}'>{{myText}}</a>" }; }); </script> </html>
用theirUrl将some-Attr关联起来，通过scope传递值进去directive
transclude
是否继承dom里面的元素 true继承
<!DOCTYPE html> <html> <head> <title></title> <script src="angular.min.js" type="text/javascript"></script> </head> <body ng-app="demo" ng-controller="demoController"> <div my-Directive title="slidebox"> <ul> <li>first link</li> <li>second link</li> </ul> </div> </body> <script> var demo = angular.module("demo", []); demo.controller("demoController", function ($scope) { //$scope.DirectiveTest = "DirectiveTestcc"; }); demo.directive("myDirective", function () { return { restrict: "EA", transclude: false, scope: { title:"@" }, template: "<div class='{{title}}' ng-transclude></div>" }; }); </script> </html>
注意点为template里要加上ng-transclude.. 同类可对比replace:是否覆盖外层的wrap
controller
controller: function ($scope, $element, $attrs, $transclude) {
$scope.cls = $attrs.class; //拿到属性class的值 $attrs是一个object
//$element 代表该元素
//$transclude ??
}
controllerAs
直接加上外面的controller 就可以内部使用