AngularJS : 为什么 $interpolate 不能渲染 ng 风格？

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

$interpolatereturns一个函数里面returns一个字符串。用于解析{{bindings}}.

$compile returns 一个 returns 一个 html 元素的函数。它用于将原始 (html) 字符串编译成 html 元素并解析此字符串中的 angular 代码。 $compile 使用 $interpolate 解析此字符串中的任何绑定。

在你的情况下，你可能想使用 $compile 和 .replaceWith()。

Answer 2

$interpolate 仅用于解释标记（例如，“{{firstName}} {{lastName}}”）：

AngularJS 文档

$interpolate 是 $compile 使用的服务：

Compiles a string with markup into an interpolation function.

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

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

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

AngularJS : 为什么 $interpolate 不能渲染 ng 风格？

AngularJS : Why can't $interpolate render ng-style?

javascript

angularjs

angularjs-directive

angularjs-compile

angularjs-interpolate

AngularJS 文档