角度指令定义中的`name`?

时间:2013-03-07 14:13:30

标签: angularjs angularjs-directive

在本文档中有关指令:http://docs.angularjs.org/guide/directive

  

指令定义对象

     

指令定义对象为编译器提供指令。属性是:

     

名称 - 当前范围的名称。可选,默认为注册时的名称。

我不明白为什么名称是当前范围的名称?注册时的名字是什么?如果我指定名称,如何使用它?

app.directive('aaa', function() {
   return {
      name: 'bbb',
      link: function() {
          // how and where to use the new name `bbb`
      }
   }
}

2 个答案:

答案 0 :(得分:18)

在对源代码进行一些挖掘之后,这就是我发现的: 这是一种声明单独属性以动态地将控制器分配给指令的方法。见plunker

我们的想法是将控制器引用放在与指令名称不同的属性中。如果未指定name属性,则指令名称将用作属性。

var app = angular.module('angularjs-starter', []);

app.directive('myDirective', [ function() {
  return {
    name : 'myController',
    controller : '@',
    restrict : 'A',
    link : function(scope, elm, attr) {
      console.log('myDirective.link');
    }
  };
} ]);

app.directive('myDirective2', [ function() {
  return {
    controller : '@',
    restrict : 'A',
    link : function(scope, elm, attr) {
      console.log('myDirective2.link');
    }
  };
} ]);

app.controller('MyDirectiveController', [ '$scope', function($scope) {
  console.log('MyDirectiveController.init');
} ]);

app.controller('MyDirectiveController2', [ '$scope', function($scope) {
  console.log('MyDirectiveController2.init');
} ]);

app.controller('MyDirective2Controller', [ '$scope', function($scope) {
  console.log('MyDirective2Controller.init');
} ]);

模板:

<h1 my-directive my-controller="MyDirectiveController">My Directive Controller</h1>
<h1 my-directive my-controller="MyDirectiveController2">My Directive Controller 2</h1>
<h1 my-directive2="MyDirective2Controller">My Directive 2 Controller</h1>

输出:

MyDirectiveController.init
myDirective.link
MyDirectiveController2.init
myDirective.link
MyDirective2Controller.init
myDirective2.link 

答案 1 :(得分:1)

您可以更改指令控制器的名称,因此如果您希望控制器来自另一个指令,则使用新名称。这由ngForm指令使用,您必须输入require:'form'而不是require:ngForm