angularjs 自定义指令中的restrict的几种取值

luoyjx · 2016-09-27 15:58 · 658次阅读

在写angularjs的自定义指令时,开始对这个restrict很懵。

在《angularjs权威指南》中,解释了这个:

声明指令本质上是在HTML中通过元素、属性、类或注释来添加功能。

那么这几种类型又分别表示哪几种情况呢?

  • <my-directive></my-directive>

这几种分别对应了上面的元素、属性、类、注释

而在指令中定义的时候,这几种的类型的表示方法是有对应的字母:

  • 元素(E)
  • 属性(A)
  • 类(C)
  • 注释(M)

例如:

angular.module('myApp', [])
  .directive('myDirective', function() {
	return {
	  restrict: 'EAC',
	  replace: true,
	  template: '<a href="http://google.com">Click me to go to Google</a>'
	};
  });

但是,无论有多少种方式可以声明指令,我们坚持使用属性方式,因为它有比较好的跨浏览器兼容性

<div my-directive></div>

为了更加明确我们的意图,将restrict设置为字母A(代表attribute): restrict: 'A'

遵循这个约定的同时,也要注意每个浏览器的内置样式,以便决定指令模板在HTML中是嵌套在声明元素内,还是替换声明元素。

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册