4

我已经知道每个项目的目的是什么：compilevs link(pre/post)vscontroller

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

HTML

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

Controller

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

});

Directive

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函数 vscompile函数？

4

1 回答 1

1

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

指令是一种在 Angular 中使用 DOM 的机制。它使您可以利用 DOM 元素及其属性。因此，它还为您提供回调以使您的工作更轻松。 template，compile并且link是那些例子。由于您的问题是具体的compile，template我也想补充一下link。

A) 模板

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

B) 编译

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

将 HTML 字符串或 DOM 编译为模板并生成模板函数，然后可以使用该函数将范围和模板链接在一起。

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

C) 链接

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

因此，将以上所有内容合二为一

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

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

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

希望这有助于理解。谢谢

于 2015-11-03T09:24:49.120 回答