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

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。您目前所处的范围取决于具体情况（我严重建议此时docs

对于我们所有的意图和目的，让我们假设您在早期的指令中配置一个控制器：

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指令会为您处理此问题。

这比预期的要长一点 - 我希望，这可以说明“最佳实践”（这完全取决于你真正想要实现的目标）。

避免过多的Angularjs指令

1 个答案: