在Angular指令中隔離示波器

我有一個指令，必須在模板中添加一些div。問題是，每次我添加一個新的之前創建的那個被替換爲新的內容。我知道這與隔離指令的範圍有關，但它似乎不起作用。我試過scope: {}和scope: true，結果相同。在Angular指令中隔離示波器

指令：

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>

所以，當我嘗試使用顯示名增加新的元素 - >內容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>

謝謝!!

來源

2015-12-18 keyserfaty

爲什麼不使用ng-repeat呢？你試圖展示的東西沒有任何複雜的東西需要一個自定義指令。 – Claies

你可以只使用一個普通變量包含的顯示名，而不是使用範圍變量（見本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變量會留在指令相同的，無論有多少模板的div你compile並添加到它。這就是爲什麼你看到新的displayName覆蓋以前的值，因爲在這種情況下你只是更新範圍變量displayName。

來源

2015-12-18 20:14:20 TonyGW

非常感謝！我不知道我可以直接從我的指令傳遞HTML。謝謝！ – keyserfaty

在這種特殊情況下，您不需要在$ compile服務上使用$ scope。

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

只是使用自定義對象應該可以解決您的問題。

來源

2015-12-18 20:09:52 chfumero

在Angular指令中隔離示波器

回答

相關問題