angularjs - 带有编译VS模板功能的 Angular 动态模板？-6ren

angularjs - 带有编译VS模板功能的 Angular 动态模板？

转载作者：行者123 更新时间：2023-12-01 05:00:24

24

4

我已经知道每个项目的用途是什么:compile对比 link(pre/post)对比 controller
所以假设我有这个简单的代码:

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

});

指示

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

最佳答案

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

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

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.

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

C) 链接

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

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

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

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

3.链接是各种范围和观察者的监听器包装器。它将当前 Controller 的范围与模板的 html 绑定(bind)，并围绕它进行操作。

希望这有助于理解。谢谢

关于angularjs - 带有编译VS模板功能的 Angular 动态模板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33493402/

24

4

0

文章推荐： spring-mvc - Spring boot 找不到 WebApplicationContext

java - 用于构建项目的库？我可以使用 C++ 编译 C++，或者使用 python 编译 java，或者使用 C++ 编译 java，等等？
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目？在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易，但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
c++ - 代码可以用 clang 编译，但不能用 gcc 编译
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything)，但是 gcc 会发出错误。 #include #include #include using namespace
c++ - C 头文件不能用 C 编译，但可以用 C++ 编译
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
c++ - 如果使用 Makefile 编译，代码可以正常工作，如果使用 XCode 编译，代码会崩溃
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库，其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
c++ - C/C++ 项目可以使用 Xcode 编译，但不能使用 gcc/g++ 编译
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时，我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
emacs - 如何在 Windows 上为 Emacs 23.1.50 编译 CEDET 1.0pre7 编译？
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET，但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
c - fflush(stdin) 不能在 cygwin 中用 gcc 编译，但可以用 visual studio 2010 编译
我正在(重新)学习编程，我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
C++ GCC 为什么这段 sfinae 代码可以用 GCC 4.7 编译，但不能用 4.8 编译？
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。这个例子: #include #include #in
Java - 使用 java 1.4 编译 src/main/java 并使用 1.5 编译 src/test/java
我有一个项目，必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法，以便 src/main/java 使用 jdk 1.4 编译，但
PHP 编译
我想了解 PHP 编译过程是如何工作的。假设我有一个名为funcs.php 的文件并且这个文件有三个函数，如果我include 或require 它，所有的在文件加载期间编译三个函数？或者源代码会被
gcc/g++编译
编译工具链我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment)，集成开发环境可以极大地方便我们程序员编写程序，但是配置起来
scala - 编译 for 循环时出现奇怪的错误
当我编写一些 Scala 代码时，在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义，但仍然显示了错误)。 scala> :paste // Ent
带注释的 SASS 编译
我正在编译一个 SCSS 文件，它似乎删除了我的评论。我可以使用什么命令来保留所有评论？ >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
编译 C 结构
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
Grails GSP 编译？
当您编译 grails war 时，我知道 .groovy 代码被编译为字节码类文件，但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗？安装在服务器上的
编译 : undefined reference to
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么？谢谢! 文件:calcPi.c
编译 LD_PRELOAD 包装器的冲突类型
我尝试使用 LD_PRELOAD 来 Hook sprintf function ，所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
javascript - CoffeeScript 编译
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。阅读documentation但仍然很难得到我想要的东西。我需要它来监视文件夹 src/ 中的任何 *.coffee 文
javascript - CoffeeScript 编译
我想使用定制waveformjs 。我发现this on SO但是，我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改，但是我不知道如何将其转换为 .js 文件。最佳答案为了
java - 编译/捕获异常
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关

首页

博学

6Ren·AI

商城

angularjs - 带有编译VS模板功能的 Angular 动态模板？