Изолирующие области в Угловой директиве

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, Content 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

вы могли бы просто использовать обычную переменную, чтобы содержать 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 и добавьте к нему. Именно поэтому вы видите, что новый displayName перезаписывает предыдущие значения, потому что вы просто обновляете переменную области displayName в этом случае.

Answer 2

В этом конкретном случае вам не нужно использовать $ scope в службе компиляции $.

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

просто используя пользовательский объект должен решить вашу проблему.