Question

我创建了一个下拉输入指令，用户可以在其中传入模板字符串来设置列表实际呈现的内容。在我的示例中，我传入<div style="background-color: darkgrey" ng-style="{\'color\': isActive?\'red\':\'blue\'}">{{index}}</div>，因此它将呈现项目索引编号，然后根据isActive对其进行着色。索引显示正确，背景颜色正确，但忽略了ng-style。我在setTimeout中创建模板，因为我必须等待ng-repeat来呈现<li>。

    setTimeout(function() {
         var spanList = elm.find('li');
         for (var index = 0; index < scope.list.length; index++) {
             var listElm = angular.element(spanList[index]);
             var listData = scope.list[index]
             listElm.html($interpolate(scope.listTemplate)(listData));
         }
     }, 0);

我正在遍历<li>元素并为每个元素设置模板。我使用$ interpolate而不是$ compile，因为使用$ compile会导致[[Object HTMLDivElement]]，我无法弄清楚原因。据我所知，$ compile使用$ interpolate无论如何都有效，除了ng-style，ng-show和ng-hide不起作用之外。为什么angular的指令不适用于$ interpolate？

以下是工作示例plunker。

Answer 1

$interpolate返回一个返回字符串的函数。它用于解析{{bindings}}。

$compile返回一个返回html元素的函数。它用于将原始（html）字符串编译为html元素并解析此字符串内的角度代码。 $compile使用$interpolate来解析此字符串中的任何绑定。

在您的情况下，您可能希望使用$compile和.replaceWith()。

Answer 2

$interpolate仅用于解释标记（例如，＆＃34; {{firstName}} {{lastName}}＆＃34;）：

AngularJS文档

$interpolate是$compile使用的服务：

将带有标记的字符串编译为插值函数。

ngStyle，ngShow等不依赖于插值。相反，他们依靠$parse服务来评估AngularJS表达式，并确定如何呈现行为。

$compile在您的场景中是合适的，因为它通过激活其中的任何指令来编译模板HTML片段，间接调用$parse来计算表达式。请记住在$compile之前将模板附加到DOM，因为指令可能依赖于DOM上方的父指令。我推荐以下模式：

 var e = angular.element(someTemplate); 
 element.append(e);
 $compile(e)($scope);

AngularJS：为什么不能内插渲染ng-style？

2 个答案:

AngularJS文档