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功能vs compile功能？

Answer 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，这意味着可以在链接中直接访问范围。范围是角度应用程序的唯一，因此它为您提供了使用实际模型的优势。链接在dom操作中也很有用，可以使用jQlite

来处理任何DOM元素

所以在一个

中收集以上所有内容

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

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

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

希望这有助于理解。感谢

使用编译VS模板函数进行角度动态模板化？

1 个答案: