2016-03-21 9 views
0

誰かが私がここで間違っていることを教えてもらえますか?私はここにしようとしている方法でイメージ配列を補間することは可能ですか?私はオブジェクトが動作していることを知っています。なぜなら、inkObject.headerプロパティはページを細かく補間しますが、画像の組み合わせを持つ配列は何らかの理由で機能していません...もし、オブジェクトの中で、このような配列を渡すことができます。AngularJsヘルプ、分離スコープに渡されたオブジェクトの配列の選択に問題があります

ありがとうございました。

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

デフォルトは'A'(属性)

、テンプレートであり、NG-繰り返しの使用方法

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

は必要ありません:あなたのディレクティブはすべき

//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

the {{ }}

+0

お返事ありがとうございます。それでも、restrictプロパティを追加しても、イメージは表示されません。 – 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

イメージが 'image'タグに' ng-src'を介して参照されたパスに実際に存在するかどうか、または参照されたパスが正しいかどうかを確認することも提案します。 – Harpreet

0

コメント欄の両方のコメント欄のように、{{inkObject.imageArray}}はinkObject.imageArrayである必要があります。しかし、私はそれが示唆されたときにそれを試していました、そして、それは最初に働いていませんでした。私が気づいたのは、ブラウザが指示文のデータをキャッシュしていたため、編集中のものが画面に表示されていないということでした。どうやら、それはAngularJsのディレクティブで頻繁に起こる可能性があります。だから、それに気をつけろ!私はそれを認識した後、templateUrlの最後にクエリ文字列を追加しました。実際には、私がディレクティブに行っていた編集を実際に見ることができ、括弧を削除するだけでした。