<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body > <div ng-app="myApp" ng-controller="myController"> <!-- 引用自定义指令 --> <my-directive></my-directive> <!-- 模板代码：须放在myController所在标签内部 --> <script type="text/ng-template"> <div> 自定义指令模板的templateUrl形式</div> </script> </div> <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { }); //创建自定义指令 app.directive("myDirective", function() { return { restrict:'E', templateUrl : "template.html" }; }); </script> </body> </html>
有多个模板时，我们可以将所有的模板集中在一个文件中，只需加载一次，然后根据id的不同调用不同的模板。
2.transclude
定义是否将当前元素(html页面的自定义指令)的内容转移到模板中。
模板中要接收当前元素内容的标签需要使用ng-transclude指令。
<body > <div ng-app="myApp" ng-controller="myController"> <!-- 引用自定义指令 --> <my-directive>自定义指定令内容</my-directive> <!-- 模板代码 --> <script type="text/ng-template"> <div> 模板内容</div> <div ng-transclude></div>//模板接收上面自定义指令间的内容 </script> </div> <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { }); //创建自定义指令 app.directive("myDirective", function() { return { templateUrl : "template.html", transclude : true//转移到模板中 }; }); </script> </body>
3.什么是scope的父作用域
引用自定义指令的html页面的控制器所能控制的范围。下面代码的父作用域就是myController所控制的范围
<body > <div ng-app="myApp" ng-controller="myController"> <my-directive></my-directive><!-- 引用自定义指令 --> </div> <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope){ }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body>
4.scope属性的值是对象(object)时的用法
AngularJS内置指令的用法：ng-model=”obj”，通过obj这个变量双向绑定值，controller里变了，html页面也跟着变化。这说明，内置指令不仅可作为属性，还可动态改变值，这个要是不懂的，看看基础语法。如下代码：
<div ng-app="myApp" ng-controller="myController"> 要动态变化的内容: <input ng-model="obj"> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.obj = "这个字符串值会同步到html里"; }); </script>
自定义指令当然也需要实现这种功能啦。scope属性为对象时，可为自定义指令指定一个可以绑定值的属性。这里还得说明一下的是，这个scope属性与自定义指令里link属性里的scope参数是一个变量。
<!-- =符号的用法--> <body > <div ng-app="myApp" ng-controller="myController"> <!-- 引用自定义指令：obj变量与控制器里的objc变量双向绑定了值 --> <my-directive speak="obj"></my-directive> </div> <script> //创建模块 var app = angular.module('myApp', []); //创建控制器 app.controller('myController', function($scope) { $scope.obj="父作用域";//父作用域给自定义指令属性赋的值 }); //创建自定义指令 app.directive("myDirective", function() { return { template : "<p>模板内容</p>", scope:{ title:"=speak"//定义一个speak属性供html页面的自定义指令用。如果写成title:"="格式，则自定义指令里的属性名就是title。 }, link: function postLink(scope, iElement, iAttrs) { console.log(scope.title)//这里打印的值与控制器里的值一样 } }; }); </script> </body>
有了前面的一个示例，下面再来说说绑定策略：即用符号前缀给自定义指令传值。它是一个键值对，键是在自定义指令中使用的，值里符号后面的字符串是html页面自定义指令的属性名；如果值里只有符号，则html页面自定义指令的属性名就是键名。