Angular 动态模板编译 VS 模板功能？

Question

我已经知道每一项的用途是什么：compile vs link(pre/post) vs controller

假设我有这个简单的代码：

HTML

  <body ng-controller="mainController">
    {{ message }}
    <div otc-dynamic=""></div>
  </body>

控制器

app.controller("mainController", function($scope) {
  $scope.label = "Please click";
  $scope.doSomething = function() {
    $scope.message = "Clicked!";
  };

});

指令

app.directive("otcDynamic", function($compile) {

  var template = "<button ng-click='doSomething()'>{{label}}</button>";

  return {

    compile: function(tElement, tAttributes) {
        angular.element(tElement).append(template);
        for (var i = 0; i < 3; i++) {
          angular.element(tElement).append("<br>Repeat " + i + " of {{name}}");
        }

        return function postLink(scope, element, attrs) {
          scope.name = "John";
        }
      }

  }
});

正如我们所见，我修改了模板（在 compile 函数处 - 它实际上应该在的位置）

结果（plnker）：

但是

我不知道 template:... 也可以使用函数。

所以我可以改用 template 函数 (plunker) :

app.directive("otcDynamic", function() {

  var template1 = "<button ng-click='doSomething()'>{{label}}</button>";

  return {
    template: function(element, attr) {
      element.append(template1);
      for (var i = 0; i < 3; i++)
        element.append("<br>Repeat " + i + " of {{name}}");

    },

    link: function(scope, element) {
      scope.name = "John";
    }
  }
});

问题

如果是 - 我应该什么时候使用 template 函数与 compile 函数？

Answer 1

让我试着解释一下我到目前为止所理解的内容。

Directives 是一种与 Angular 中的 DOM 一起工作的机制。它使您可以利用 DOM 元素及其属性。因此，它还为您提供回调，让您的工作变得轻松。 template 、 compile 和 link 就是这些例子。由于您的问题是针对 compile 和 template 的，因此我也想补充一下 link。

A) 模板

就像它所说的那样，它是一堆 HTML 标签或文件来代表它 DOM 直接作为你的指令的表面。模板可以是具有特定路径的文件或代码中的内联 HTML。就像你上面说的。模板可以包装在函数中，但模板的唯一用途是 HTML 的最终集合，它将被放置在 DOM 上。由于您可以访问元素及其属性，因此您也可以在此处执行尽可能多的 DOM 操作。

B) 编译

Compile 是指令中的一种机制，它编译模板 HTML 或 DOM 对其进行某些操作，并将 return 最终集 HTML 作为模板。就像 Angular DOC

中给出的一样

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

这清楚地说，这是模板之上的东西。现在就像我上面说的，你也可以在 template 中实现类似的操作，但是当我们有用于其唯一目的的方法时，你应该为了最佳实践而使用它们。你可以在这里阅读更多 https://docs.angularjs.org/api/ng/service/$compile

C) Link

Link 用于将 $watch、$apply 等侦听器注册到 link 您的具有 Angular 范围的模板，以便它将与模块绑定。当您在控制器中放置任何指令时，作用域流会通过 link，这意味着可以在 link 中直接访问该作用域。 Scope 是 angular 应用程序的唯一，因此它为您提供了使用实际模型的优势。 Link 在 dom 操作中也很有用，可用于使用 jQlite

处理任何 DOM 元素

所以把以上全部收集起来

1.模板 是DOM 或HTML 指令的主要来源。它可以是文件或内联 HTML.

2。 Compile 是将 HTML 编译成最终模板的包装器。它用于收集所有 HTML 元素和属性以创建指令模板。

3。 Link 是各种范围和观察者的监听器包装器。它将当前控制器的范围与模板的 html 绑定在一起，并围绕它进行操作。

希望这有助于理解。谢谢

Angular 动态模板编译 VS 模板功能？

Angular dynamic templating with compile VS template function?

angularjs

angularjs-directive

angularjs-compile

angularjs-templates