2

我有以下指令：

.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 来查找这些元素并将事件侦听器绑定到它们吗？我可以通过不断使用指令路由来了解它们如何成为指令爆炸，最佳实践是什么？

4

1 回答 1

6

对我来说，问题在于这些指令究竟应该用于什么。

在我看来，就好像您正在尝试将您从其他框架（如 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 作为框架的“模型”部分。来自这些库，这会让你大吃一惊，但实际上，对于初学者来说，它归结为：

使用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指令会为您处理这个。

这比预期的要长一些——不过，我希望这可以阐明“最佳实践”（这完全取决于您实际想要完成的工作）。

于 2013-08-07T22:36:20.023 回答