0

我创建了一个下拉输入指令，用户可以在其中传入模板字符串来设置列表实际呈现的内容。在我的示例中，我正在传递，<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。

4

2 回答 2

1

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

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

在您的情况下，您可能想要使用$compileand .replaceWith()。

于 2015-04-21T12:46:39.947 回答
0

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

AngularJS 文档

$interpolate是由以下用户使用的服务$compile：

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

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

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

 var e = angular.element(someTemplate); 
 element.append(e);
 $compile(e)($scope);
于 2015-04-21T12:56:01.560 回答