理解指令的restrict属性
restrcit属性说明
restrict: EACM中的任意一个之母。它是用来限制指令的声明格式的。
1 2 3 4 | E - 元素名称：<my-directive></my-directive>A - 属性： <div my-directive="exp"> </div>C - 类名：<div class="my-directive: exp;"></div>M - 注释： <!-- directive: my-directive exp --> |
它做了什么
示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html ng-app='app'><body> <hello> </hello> <div hello> </div> <div class="hello"> </div> <!-- directive: hello --></body><script src="bower_components/angular/angular.js"></script><script>var appModule = angular.module('app', []);appModule.directive('hello', function() { return { restrict: 'AEC', template: '<h3>Hi there</h3>', replace: true };});</script></html> |
运行结果
1 2 3 4 | <h3>Hi there</h3><h3 hello>Hi there</h3><h3 class="hello">Hi there</h3><h3>Hi there</h3> |
可以看到几种方式，做的事情一样，只有部分区别. 这些区别有什么作用，用在什么场合？
使用场合
restrict=E时，浏览器无法识别指令的声明元素，那么可以知道这个指令一定是起替换作用，也就是说template一定有值.
restrict=A时，指令是以元素属性形式存在的，这个指令的作用则可以不是替换作用. 那么它可以做什么？以link方式操作dom.
比如为元素聚焦
1 2 3 4 5 6 7 8 9 10 | <input type="input" focus/>appModule.directive('focus', function() { return { restrict: 'A', link:function(scope, elem, attrs){ $(elem).focus(); } };}); |
restrict=C，则是在绑定指令的同时，指定它的css样式，让指令与样式同步.
restrict=M，则在一些场合非常有用，方便在注释与代码之间切换.
2015年6月15日 09:59
7878
2015年6月15日 10:11
@78: 放顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶大
2015年6月15日 10:11
@78:
@78: 额鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿12
2015年7月17日 11:34
test