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

2023年7月25日 223次阅读

我已经知道每个项目的目的是什么：编译与链接(前/后)与控制器

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

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";
        }
      }

  }
});

我们可以看到,我修改了模板(在编译函数 – 它应该是实际的位置)

结果(plnker)：

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

但

我不知道那个模板：…也可以采取一个功能.

所以我可以改用模板函数(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";
    }
  }
});

题

如果是这样 – 我什么时候应该使用模板函数vs编译函数？

最佳答案 让我试着解释一下到目前为止我所理解的内容.

Directives是一种在Angular中使用DOM的机制.它使您可以利用DOM元素及其属性.因此,它还为您提供回调,使您的工作轻松.
模板,编译和链接就是那些例子.由于你的问题是特定的编译和模板,我想添加关于链接.

A)模板

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

B)编译

编译是指令中的一种机制,它编译模板HTML或DOM以对其执行某些操作并返回最终的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.

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

C)链接

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

所以收集以上所有内容

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

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

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

希望这有助于理解.谢谢

点赞