我是否需要为 Angular 指令提供模板来包装内容？

Question

我想我可能想在这里将一个方形钉子安装到一个圆孔中。我想做的是定义一个约定，将一些通用的 JavaScript 功能附加到特定的 HTML 属性。

例如，假设我有这个 HTML：

<nav my-nav>
  <ul>
    <li class="tab">1</li>
    <li class="tab">2</li>
    <li class="tab">3</li>
  </ul>
</nav>

我对 Angular 的（非常原始的）理解是我应该创建一个指令。从the documentation 可以看出，由于我想包装任意内容，我需要使用transclude 属性。但是，当我尝试让 <nav> 中的元素消失时。

通过反复试验，我看到 Angular 希望我提供一个 template 属性来包装内容。所以我用一个毫无意义的<div>标签来做这件事，这对我来说是多余的。

myApp.directive('myNav', function() {
  return {
    // I get why this is necessary
    transclude: true,

    // I get why this is necessary
    link: function(scope, element) {
      // This is where my custom JavaScript logic goes
    }

    // This feels unnecessary to me
    template: '<div ng-transclude></div>',
  };
});

我在这里违背了原则吗？有没有更惯用的方式来用 Angular 做到这一点？我什至不应该用 Angular 来做这件事（即，标准方法是否只是为此目的在 Angular“外部”编写自定义 JavaScript）？

Answer 1

是的，指令是 Angular 处理 DOM 操作的方式。

但是如果你只是想在一些 html 中添加事件监听器，你不需要担心嵌入。

例如，这里有一个演示，它向附加的 dom 元素和每个 li 元素（仅用于演示目的）：

myApp.directive('myNav', function() {
  return {
    link: function(scope, element) {
        // Add event listener to whole dom element
        element.bind('click', scope.clicked); 

        // Individual event listeners on each li element
        liElems= element.find("li");
        for (i = 0;i<liElems.length;i++)
          angular.element(liElems[i]).bind('click', scope.clicked); 
    }
  };
});

demo fiddle

Answer 2

你不必用 div 包裹它，只需使用 $transclude:

myApp.directive('myNav', function() {
  return {

    transclude: true,

    link: function(scope, element, attr, ctrl, $transclude) {
       $transclude(function(clone){
          element.append(clone);
       });
    }

  };
});

ng-transclude 只是简单案例的捷径。