AngularJs的幫助，麻煩選擇數組中的對象傳遞到隔離範圍

誰能告訴我我在做什麼錯在這裏？我可以按照我想要的方式插入圖像數組嗎？我知道該對象正在工作，因爲inkObject.header屬性可以很好地插入到頁面中，但具有各種圖像的數組由於某種原因不起作用......我不確定它是否贏得了「允許你在對象中傳遞這樣的數組，或者如果我只是做錯了什麼。AngularJs的幫助，麻煩選擇數組中的對象傳遞到隔離範圍

謝謝。

//Controller in app.js 
    app.controller('galleryCtrl', ['$scope', '$http','$location', 
      function ($scope, $http, $location) { 
       $scope.ink = { 
        header: "Personalized Ink Products", 
        imageArray: [ 

        'ink-1.jpg', 
        'ink-2.jpg', 
        'ink-3.jpg', 
        'ink-4.jpg' 
        ] 

      }; 
}]); 
    //my directive in app.js 
app.directive('pictureGallery', function() { 
    return { 
     templateUrl: 'directives/picturegallery.html', 
     replace: true, 
     scope: { 
      inkObject: '=' 

      } 
    } 

}); 

//the template 

<div class="top-space"> 
    <h1>{{ inkObject.header }}</h1> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-4 col-md-4" ng-repeat="image in {{ inkObject.imageArray }}"> 
      <a href="img/{{image}}" target="_blank"> 
      <img ng-src="img/{{image}}" width="200px" height="200px" 
      class="img-responsive img-thumbnail bottom-space"> 
      </a> 
     </div> 
    </div> 
</div> 


//the view 
<picture-gallery ink-object="ink"> </picture-gallery>

來源

2016-03-21 brandon

您的指令應該：

return { 
    .... 
    restrict : 'E', // Element name 
    .... 
}

默認爲'A'（屬性）

而且在模板中，NG-repeat的用法

< ... ng-repeat="image in inkObject.imageArray" ...>

不需要{{ }}

來源

2016-03-21 02:18:52 qiyon

嘿，謝謝你的回覆。儘管添加了限制屬性，但圖像並未顯示出來。 – brandon

我認爲這個問題是與ng-repeat部分，您可以參閱plnkr：http://plnkr.co/edit/rPi20W9AVnJL6BGS1jEh?p=preview

我剛剛更換

ng-repeat="image in {{ inkObject.imageArray }}"

與

ng-repeat="image in inkObject.imageArray"

和它的工作。

來源

2016-03-21 06:44:40 Harpreet

我也會建議通過'image'標記中的'ng-src'來驗證圖片是否實際存在於引用路徑中，或者路徑引用是否正確。 – Harpreet

事實證明，就像兩位評論者所建議的那樣，我需要取出括號，即{{inkObject.imageArray}}應該是inkObject.imageArray。但是，當我提出這個建議時，我曾嘗試過，而且一開始它並不工作。我意識到我的瀏覽器正在緩存指令中的數據，所以我所做的編輯沒有顯示在屏幕上。顯然，這可能會經常發生在AngularJs中的指令中。所以，小心那個！一旦我意識到這一點，我添加了一個查詢字符串到templateUrl的末尾，然後我可以看到我正在對該指令進行的編輯，並看到我所要做的就是刪除括號。

來源

2016-03-26 15:17:01 brandon

AngularJs的幫助，麻煩選擇數組中的對象傳遞到隔離範圍

回答

相關問題