Angular JS 指令 - 完整背景

Question

我是 angularJS 的新手，学习指令（并且非常努力:)）。

我正在尝试理解plunker 中的一段 angularJS 代码 由用户 tasseKATT 为 stack overflow question 提供有关 angular-ui-bootstrap 的信息。

我希望有人能更详细地解释这个代码片段。

具体

如何在指令中进行解析和编译

Angular 如何知道何时重新编译指令（$watch - 也许，如果是的话，如何）。

我检查了 documentation for $parse，但没有看到任何关于服务功能的解释。我错过了什么信息。

还有什么是

 (value || '').toString();

用于。

compileHTML 有哪些属性。在哪里可以看到比 AJS 提供的更详细解释的 compile 函数的文档。

什么是 $$addBindingClass(tElement) 和 $$addBindingInfo。

解释函数ngBindHtmlWatchAction

什么是 $sce。

指令的片段如下

 app.directive('compileHtml', ['$sce', '$parse', '$compile',
  function($sce, $parse, $compile) {
    return {
      restrict: 'A',
      compile: function ngBindHtmlCompile(tElement, tAttrs) {
        var ngBindHtmlGetter = $parse(tAttrs.compileHtml);
        var ngBindHtmlWatch = $parse(tAttrs.compileHtml, function getStringValue(value) {
          return (value || '').toString();
        });
        $compile.$$addBindingClass(tElement);

        return function ngBindHtmlLink(scope, element, attr) {
          $compile.$$addBindingInfo(element, attr.compileHtml);

          scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {

            element.html($sce.trustAsHtml(ngBindHtmlGetter(scope)) || '');
            $compile(element.contents())(scope);
          });
        };
      }
    };
  }
]);

Answer 1

免责声明：首先，伙计，您是 Angular 的新手，您正在尝试使用非常复杂的指令来理解指令。如果你从不那么复杂的东西开始也许会更好:)

我会尽力回答你的许多问题：

在指令中如何解析和编译： Angular 知道存在哪些所有指令，因此当您编写与其中一个指令匹配的名称时，它会编译 html 并链接该指令。（我正在尝试找到一个好的博客供您阅读这些指令周期，也许这个post 会有所帮助）

angular 如何知道何时重新编译指令（$watch - 也许，如果是这样的话）： angular 不会重新编译指令，一个指令仅在 angular 第一次遇到它时编译一次。 $watch 基本上是放在一个变量上的，所以每当 angularjs 应用范围的更改时，它会查找该变量是否已更改。

$解析 这是一种向 html 添加角度的方法。因此，如果您直接将 html 附加到元素，它就没有类似角度的功能。所以我们得到了 html，编译/解析它，然后附加到元素上。解析基本上是获取 html 中的所有变量并对它们应用两种方式绑定，并用它们在控制器中的值替换它们。

阅读此post。

请记住，编译/解析总是针对范围变量进行的，因为在 html 中定义的变量是范围变量的属性。

这是什么 (value || '').toString(); 这是 js 开发者常用的编码实践。 这基本上相当于：

(value ? value : '').toString();

为什么我们不直接这样使用值

value.toString();

因为如果值是undefined或者null，它没有toString函数，会抛出错误。

所以编码器正在尝试检查该值是否存在，然后将值转换为字符串，否则将空字符串（转换为字符串结果为空字符串）。

什么是 $sce？ sce 是一项服务，它包含在 angular-sanitize.js 文件中，该文件是 angular bundle 的一部分。当有人试图修改 html 以插入他的链接（我们称之为恶意活动）时，angular 不允许并将他的 html 视为简单文本。

但是如果你想添加 html，你将你的 html 传递给 $sce 服务（在控制器/指令等中注入）并且输出是你可以插入到视图中的 html（这将作为 html 出现）。

$$addBindingClass 这只是给元素添加“ng-binding”类，这样你就可以看到哪个元素有angularjs创建的模型。

$$addBindingInfo 这是为了调试目的向元素添加信息。您可以在检查器中选择元素并在控制台中运行以下语句以获取范围信息。

angular.element($0).scope(); //$0 means selected element

这是一个link，可以更好地解释这件事。