Angular /指令 - 如何在數組中有新項目時追加HTML /模板？

Question

我用相機捕捉一些照片（Phonegap）並將圖像/ url保存在一個數組中。要顯示的圖像我想補充的是這樣的（圖像將顯示在表格中進行）：

<!-- language: lang-html --> 
<div class='ui-block-b'><img src=" + value + "></div>"; 

，所以我知道我需要這樣的指令。我的問題是要了解如何在將新圖像/項添加到陣列時如何反應，以便我可以顯示它。

我應該看陣列嗎？

<!-- language: lang-js --> 
angular.module('mydirectives').directive("ngImage", function ($compile) { 
    return { 
     template: "<div class='ui-block-b'><img src=" + {{images.image}} + "></div>", 
     scope: { 
     images:'=' 
    } 
     link: function (scope, elm) {   
     scope.$watch(images, function (value) { 

      // ?????? 
     }); 
     } 
    }; 
    }); 

Answer 1

你需要一個指令嗎？你可以用內置的指令來做：

<div data-ng-repeat="item in images" class="ui-block-b"><img data-ng-src="item.image"></div> 

ngRepeat觀看圖像。你只需要images.push（{image：'newUrl'，imageType：'A'}）。此外，如果你只是有條件地將類那麼你可以這樣做：

<div data-ng-repeat="item in images" data-ng-class="{'ui-block-b': item.imageType == 'B', 'ui-block-a': item.imageType == 'A'}"><img data-ng-src="item".image></div> 

如果你還是想用自己的指令去做，那麼你想要的是看一個集合$範圍。$ watchCollection這可能有點複雜。您也可以嘗試只看該集合的長度屬性。