2016-03-21 1 views
0

Может ли кто-нибудь сказать мне, что я делаю неправильно здесь? Можно ли интерполировать массив изображений так, как я пытаюсь здесь? Я знаю, что объект работает, потому что свойство inkObject.header интерполирует тонко на страницу, но массив, который имеет множество изображений, не работает по какой-то причине ... Я не уверен, если он выиграет ' t позволить вам передать такой массив, внутри объекта, или если я просто делаю что-то неправильно.Справка 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> 

ответ

0

ваша директива должна:

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

по умолчанию 'A' (Атрибут)

И в шаблоне, использование в нг повторами в

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

не нужно {{ }}

+0

Эй, спасибо за ответ. Тем не менее, несмотря на добавление свойства ограничения, изображения не отображаются. – brandon

0

Я думаю, что вопрос с ng-repeat части, вы можете передать plnkr: http://plnkr.co/edit/rPi20W9AVnJL6BGS1jEh?p=preview

Я только что заменил

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

с

ng-repeat="image in inkObject.imageArray" 

, и она работала.

+0

Я также предлагаю проверить, действительно ли изображения существуют на указанном пути через 'ng-src' в теге' image' или правильный путь. – Harpreet

0

Оказалось, что, как и оба комментатора, мне нужно было снять скобки, то есть {{inkObject.imageArray}} должен быть inkObject.imageArray. Тем не менее, я пробовал это, когда это было предложено, и он не работал вначале. Я понял, что мой браузер кэшировал данные из директивы, поэтому редактирование, которое я делал, не отображалось на экране. Видимо, это часто случается с директивами в AngularJs. Итак, следите за этим! Как только я это понял, я добавил строку запроса в конец шаблонаUrl, и тогда я мог бы увидеть редактирование, которое я делал в директиве, и посмотреть, что все, что мне нужно было сделать, это удалить скобки.

 Смежные вопросы

  • Нет связанных вопросов^_^