避免过多的Angularjs指令

Question

我有以下指令:

.directive('myDirective', function() {
   restrict: 'A',
   templateUrl: 'app/templates/someTemplate/html',      
});

在我的模板(someTemplate.html)中,我有以下内容:

<div>
  <div>Some div</div>
  <input type="button" value="button" />
</div>

我想为按钮和div添加行为.我可以去添加指令这样的路线:

<div>
  <div div-click>Some div</div>
  <input type="button" value="button" button-click />
</div>

并通过element.bind添加更多指令和绑定点击事件(...但是有最好的做法吗？我应该在包含这些元素的'myDirective'中添加行为吗？通过jQuery或jQlite.模板中的可点击元素不是我应该只使用jQuery来查找这些元素并将事件监听器绑定到它们？我可以通过不断使用指令路径看看它们如何成为指令爆炸,最佳做法是什么？

Answer 1

对我来说,问题在于指令究竟应该是什么.

这对我来说,好像你试图将你从其他框架(如jQuery)知道的功能包装到指令中.这会导致像:

var app = angular.module("module.directives", []);
app.directive('myDirective', function() {
   restrict: 'A',
   templateUrl: 'app/templates/someTemplate/html',
   link: function(scope, el) {
     el.on("click", function() { console.log(42); });
   }
});

虽然当然可能,但(至少对我来说)这被认为是"糟糕"的风格.与Angular的不同之处在于,它不使用DOM作为框架的"模型"部分,如jQuery或Prototype.来自这些库,这是一个包围你的头,但实际上,对于初学者,它归结为:

使用scope并让范围的更改反映在DOM中.

反射部分实际上是简短的一个:Angular开箱即用(即"大部分时间").

通过单击重新考虑您的示例 - Angular以指令的形式提供了出色的事件处理程序.ng-click这是一个非常好的例子:

<div>
  <div ng-click="method()">Some div</div>
  <input type="button" value="button" ng-click="method2()" />
</div>

这个指令带有一个表达式 - 它看起来有点像旧时代,你可以将javascript直接绑定到元素,如下所示:

<a href="#" onclick="method()">here</a>

但它有所不同--Angular将查找名称method以及您method2当前scope所处的当前状态.您目前所处的范围取决于具体情况(我现在大量建议使用文档)

对于我们所有的意图和目的,让我们说,你从前面的指令中配置一个控制器:

var app = angular.module("module.directives", []);
app.directive('myDirective', function() {
   restrict: 'A',
   templateUrl: 'app/templates/someTemplate/html',
   controller: ['$scope', function(scope) {
     scope.active = false;
     scope.method = function() { console.log(42); };
     scope.method2 = function() { scope.active = !scope.active };
   }]
});

您可以在许多地方定义它,甚至可以在指令的链接阶段进行定义.您还可以在单​​独的模块中创建额外的控制器.但是,让我们暂时坚持下去:

在模板中 - 当您单击div时,method将调用范围.没什么好看的,只是控制台输出.method2更有趣一点 - 它改变active了范围的变量.你可以利用这个优势:

<div>
  <div ng-click="method()">Some div</div>
  <input type="button" value="button" ng-click="method2()" />
  <span ng-show="active">Active</span>
</div>

单击按钮时,将打开范围,并且 - ng-show指令将为您处理此操作.

这比预期的要长一点 - 我希望,这可以说明"最佳实践"(这完全取决于你真正想要实现的目标).