Question

我有一个使用ngRepeat创建另一个指令实例的指令：

app.directive('prMain', function(){
  return {
    accept:'AE',
    template:'<div pr-item="" ng-repeat="item in items">{{item.name}}<div>'
  };
});

子指令是这样的：

app.directive('prItem', function($compile){
  return {
    accept:'AE',
    template:'<p>{{item.name}}</p>',
    compile: function(elem) {
      elem.removeAttr('pr-item');
      return function(scope) {
        console.log(scope.item.color);
        var newEle = $compile('<div ng-style="{\'color\':\'red\'}">DIRECTIVE item.name</div>')(scope);
        elem.append(newEle);
      };
    },
  };
});

我原本期望数组中每个元素有两个div，最后一个是彩色的。

相反，我在浏览器中得到了令人困惑的文本序列：

one

two
DIRECTIVE item.name

three
DIRECTIVE item.name
DIRECTIVE item.name

four
DIRECTIVE item.name
DIRECTIVE item.name
DIRECTIVE item.name

请参阅此plunker。

最重要的问题是：为什么ng-style没有正确评估范围表达式？第二个问题是上面显示输出的原因。

Answer 1

您没有以正确的方式使用compile。特别是，您正在为返回的编译方法创建其elem参数的闭包。相反，此函数中的每一个都应该在其owm elem上工作。

我不确定如何解释这个，所以这里有一些代码和一个固定的插件：

compile: function(elem_do_not_touch_elsewhere) {
  elem_do_not_touch_elsewhere.removeAttr('pr-item');

  return function(scope, elem_use_this_one) {
    var newEle = $compile('<div ng-style="{color:\'red\'}">DIRECTIVE item.name</div>')(scope);
    elem_use_this_one.append(newEle);
  };
},

http://plnkr.co/edit/aLyif5GxWySZs6RmZ6qm?p=preview

为什么$ compile不会评估由ngRepeat创建的指令中的范围

1 个答案: