angularjs directive

在AngularJS中,Dom操作应该在directive里进行,而不应该在controllers, services或者其他任何地方。

directives命名

  • 使用不重复的前缀
    • 防止和其他人重复
    • 易读
  • 不要用ng-作为你的directive的前缀
  • 常见情况:两个单词
    • AngularUI project 用的是 “ui-“

什么时候用directives?

  • 可复用的HTML控件
    <my-widget>

  • 可复用的HTML行为
    <div ng-click="...">

  • 包装一个jQuery插件
    <div ui-date></div>

  • 你需要和DOM交互的绝大多数情况

创建一个directive

先给你的directive创建一个module

angular.module('MyDirectives',[]);

在你的app里加入directive module的依赖

angular.module('app',['MyDirectives']);

注册你的directive

angular.module('MyDirectives')
.directive('myDirective', function(){
  // TODO:
});

在HTML里使用你的directive

<div my-directive>...</div>

Restrict参数

‘A’

attributes
<div my-directive></div>

‘E’

element
<my-directive></my-directive

‘C’ ‘M’

rarely used
‘C’: classes ‘M’ : comments

组合

restrict: 'AE'

隔离的scope

directive默认是没有scope的,我们可以给它一个scope

scope: {
  someParam: '='
}

或者
scope: true
这个scope不会继承其他scope

scope参数

scope参数是从HTML的属性(attribute)传进来的

scope: {
  param1: '=', // 双向绑定(directive和controller)
  param2: '@', // 单向绑定
  param3: '&'  // 单向行为
}
<div my-directive
  param1="someVariable"
  param2="My name is {{name}}"
  param3="doSth()"
>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注