Question

我有一个指令，必须在模板上添加一些div。问题是，每次我添加一个新的创建之前，那个被新内容替换。我知道这与隔离指令的范围有关，但它似乎没有用。我已尝试scope: {}和scope: true同样的结果。

指令：

angular.module('bucket.directives', [])     
.directive('bucketList', ['$compile', function($compile) {

  var viaUrlTemplate = '<span class="bucketItem viaUrl">{{ displayName }} <i class="icon-delete">x</i></span>';

  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      scope.$on('urlBucketAdded', function(event, bucketInfo) {
        scope.displayName = bucketInfo.bucketName;

        scope.$apply(function() {
          var content = $compile(viaUrlTemplate)(scope);
          element.append(content);
        });
      });

    }
  }
}]);

HTML看起来像这样：

<div bucket-list class="bucketList">

  // new elements in 'viaUrlTemplate' get inserted here

</div>

所以当我尝试使用displayName添加新元素时 - >内容1，内容2和内容3我得到：

<div bucket-list class="bucketList">

 <span class="bucketItem viaUrl"> Content 3 <i class="icon-delete">x</i></span>
 <span class="bucketItem viaUrl"> Content 3 <i class="icon-delete">x</i></span>
 <span class="bucketItem viaUrl"> Content 3 <i class="icon-delete">x</i></span>

</div>

谢谢！

Answer 1

在这种特殊情况下，您不需要在$ compile服务上使用$ scope。

var content = $compile(viaUrlTemplate)({ displayName: bucketInfo.bucketName });

只使用自定义对象可以解决您的问题。

Answer 2

您可以使用常规变量来包含displayName而不是使用范围变量（请参阅此plnkr）：

scope.$on('urlBucketAdded', function(event, bucketInfo) {
        var displayName = bucketInfo.bucketName;
        var viaUrlTemplate = '<span class="bucketItem viaUrl">' + displayName + '<i class="icon-delete">x</i></span>';

       // scope.$apply(function() {
          var content = $compile(viaUrlTemplate)(scope);
          element.append(content);
      //  });
      });

scope变量将在指令中保持不变，无论您compile有多少个模板div并添加到它。这正是您看到新displayName覆盖以前的值的原因，因为在这种情况下您只是更新范围变量displayName。

隔离Angular指令中的范围

2 个答案: