Angular JS指令 - 完整背景

我是angularJS学习关于指令的新手（并且挣扎了很多:)）。Angular JS指令 - 完整背景

我想了解的stack overflow question在plunker 一块angularJS代码的用户tasseKATT关于角UI的引导。

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

具体

解析和编译如何发生在指令

角度如何知道什么时候重新编译指令（$腕表 - 也许，如果又如何）。

我检查了 documentation for $parse，但没有看到服务采取功能的任何解释。我错过了哪些信息。

而且什么是

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

用于

。

什么是compileHTML的属性。我在哪里可以看到比AJS提供的更详细解释的编译功能的文档。

什么是$$ 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); 
      }); 
     }; 
     } 
    }; 
    } 
]);

来源

2016-01-20 user2977259

免责声明：第一件事，哥们，你是在角新秀和你想了解使用一个非常复杂的指令的指令。也许它更好，如果你开始有一些不那么复杂的:)

我会尽量回答您的很多问题：

如何解析和编译指令中发生： 角知道所有的指令都是其中存在，所以当你写一个匹配其中一个指令的名字时，它会编译html并链接指令（我试图找到一个好的博客让你阅读这些指令的循环，也许这个post会有帮助）

角度如何知道什么时候重新编译指令（$ watch - 也许，如果是这样的话）： angular doesnot recompile directives，directive only only only once once when angular encounters it first。 $ watch基本上放在一个变量上，所以无论何时angularjs应用范围的更改，它都会查找该变量是否更改。

$ parse 这是一种向html添加角度的方法。所以，如果你直接将html附加到元素，它不具有像角色一样的特征。所以我们得到html，编译/解析它，然后附加到元素。解析基本上是获取html中的所有变量并对这些变量应用双向绑定，并将其替换为控制器中的值。

阅读本文post。

请记住，编译/解析总是针对范围变量完成的，因为html内定义的变量是范围变量的属性。

这是什么（值||''）.toString（）; 这是js开发人员常用的编码实践。这基本上相当于：

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

你为什么不直接采用值这样

value.toString();

因为如果该值是未定义或为空，它没有一个toString功能，它会抛出一个错误。

因此，编码器试图检查值是否存在，然后将值转换为字符串，否则，只需将空字符串（转换为字符串结果空字符串）。

什么是$ sce？ sce是一个服务，它来自角度束的一部分文件angular-sanitize.js。当有人试图修改html来插入他的链接（我们称之为恶意活动）时，angular并不允许和将html作为简单文本。如果你想添加html，你将html传递给$ sce服务（注入控制器/指令等），输出是可以插入到视图中的html（这将以html的形式出现）。

$$ addBindingClass 这仅仅是“NG结合”类添加到元素，所以你可以看到哪些元素具有由angularjs创建的模型。

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

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

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

来源

2016-01-20 15:04:32 Kop4lyf

感谢您长时间的回答，您已经充分回答了我的所有问题。感谢你的帮助。 – user2977259

如果可能，请为$ addBindingClass（tElement）和$$ addBindingInfo添加注释。 – user2977259

增加了更多的解释以及可供参考的链接 – Kop4lyf

Angular JS指令 - 完整背景

回答

相关问题