Angular指令一
通过AngularJS模块API中的 .directive() 方法,我们可以通过传入一个字符串和一个函数来 注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的(除了第一个单词外其他单词首 字母大写,中间不加空格),函数应该返回 一个对象。
指令内容:
restrict 四种格式:元素(E)、属性(A)、类(C)或注释(M);
scope:{ }独立隔离作用域,作用域之间不影响,意味着指令有了一个属于自己的 $scope 对象,这个对象只能在指令的方法中或指令的模板字符串中使用;
controller:function(){} 指令可以有它自己的控制器,指令内部创建方法给外部指令引用;
link里面写指令内部的事件;
scope的绑定策略
@ 把当前属性作为字符串传递。还可以绑定来自外部scope的值,在属性值中插入{{}}即可。当作用域中属性私有时@someAttr;
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Google"></div>
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '@', //绑定策略 myLinkText: '@' //绑定策略 }, template: '<a href="{{myUrl}}">' + '{{myLinkText}}</a>' }; });
结果如图
= 与父scope中的属性进行双向绑定;
<label>Their URL field:</label> <input type="text" ng-model="theirUrl"> <div my-directive some-attr="theirUrl" my-link-text="Click me to go to Google"></div>
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '=someAttr', // 经过了修改 myLinkText: '@' }, template: ' <div> <label>My Url Field:</label> <input type="text" ng-model="myUrl" /> <a href="{{myUrl}}">{{myLinkText}}</a> </div>' }; });
结果如图
& 传递一个来自父scope的函数,稍后调用;