angularjs - 避免太多 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(... 但有最佳实践吗？我应该通过 jQuery 或 jQlite 在包含这些元素的“myDirective”中添加行为吗？模板并不意味着可重复使用..所以我应该使用 jQuery 来查找这些元素并将事件监听器绑定(bind)到它们吗？我可以通过不断使用指令路由来了解它们如何成为指令爆炸，最佳实践是什么？

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 的区别在于，它不像 jQuery 或 Prototype 那样使用 DOM 作为框架的“模型”部分。来自这些库的这些内容会让您费解，但实际上，对于初学者来说，它可以归结为:

Work with the scope and let the changes to the scope be reflected in the DOM.

反射部分实际上是简短而简单的部分:Angular 开箱即用(即“大多数时候”)。

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

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

该指令采用一个表达式 - 它看起来有点像过去，您可以将 javascript 直接绑定(bind)到元素，如下所示:

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

但情况有所不同 - Angular 会在您所在的当前范围内查找名称 method 和 method2。您所在的范围目前取决于具体情况(我强烈建议 docs 此时)

出于我们所有的意图和目的，可以说，您在之前的指令中配置了一个 Controller :

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 };
   }]
});

您可以在很多地方定义它，甚至可以在指令的链接阶段定义它。您还可以在单​​独的模块中创建额外的 Controller 。但让我们暂时坚持这一点:

在模板中 - 当您单击 div 时，将调用范围的方法。没什么特别的，只是控制台输出。 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 指令会为您处理此问题。

这比预期的要长一些 - 不过我希望这能够为“最佳实践”(这很大程度上取决于您实际想要完成的任务)提供一些启示。