Question

我有一个指令，它根据scope的某些状态使用不同的模板，如下所示：

app.directive('foo', function($compile) {
  return {
    restrict: 'E',
    scope: {
      bar: '='
    },
    link: function(scope, element) {
      var tpl = scope.bar == 'foo' ? '<li><strong>{{bar}}</strong</li>' : '<li>{{bar}}</li>'
      element.replaceWith($compile(element.html(tpl).contents())(scope))
    }
  }
});

如果我在ngRepeat循环中使用此指令，并且所使用的数组已更改渲染的新元素，但旧元素不会消失。

<ul>
  <foo bar="bar" ng-repeat="bar in bars"></foo>
</ul>

查看现场演示：http://plnkr.co/edit/UnsrjPh8kW27bK8RbPgY

有谁能指出我做错了什么？

Answer 1

这是因为ng-repeat和directive创建了自己的范围。尝试在ng-repeat中使用指令...它为我工作..

HTML ...

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p><button ng-click="changeBars()">Change bars</button></p>
    <ul>
      <li ng-repeat="bar in bars"><foo bar="bar">{{bar}}</foo></li>
    </ul>
  </body>

和指示..

app.directive('foo', function($compile) {
  return {
    restrict: 'E',
    scope: {
      bar: '='
    },
    link: function(scope, element) {
      var tpl = scope.bar == 'foo' ? '<p><strong>{{bar}}</strong</p>' : '<p>{{bar}}</p>'
      element.replaceWith($compile(element.html(tpl).contents())(scope))
    }
  }
});

http://plnkr.co/edit/4YZ0CQZ4Ufck07IlOckB?p=preview

当指令手动替换元素内容时，重复不会删除旧条目

1 个答案: