AngularJs Hilfe, Probleme bei der Auswahl des Arrays im Objekt, das an den Isolationsbereich übergeben wurde

Question

Kann mir jemand sagen, was ich hier falsch mache? Ist es möglich, das Bildfeld so zu interpolieren, wie ich es hier versuche? Ich weiß, dass das Objekt funktioniert, weil die inkObject.header -Eigenschaft auf die Seite fein interpoliert, aber das Array, das eine Auswahl von Bildern hat, funktioniert aus irgendeinem Grund nicht ... Ich bin mir nicht sicher, ob es, wenn es gewonnen hat ' t erlaubt es Ihnen, ein Array wie dieses innerhalb des Objekts zu passieren, oder wenn ich nur etwas falsch mache.

Danke.

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

Answer 1

Ihre Richtlinie sollte:

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

die Standardeinstellung ist 'A' (Attribut)

Und in der Vorlage, die ng-repeat der Nutzung

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

nicht brauchen die {{ }}

Answer 2

Ich denke, das Problem mit dem ng-repeat Teil ist, können Sie die plnkr verweisen: http://plnkr.co/edit/rPi20W9AVnJL6BGS1jEh?p=preview

Ich ersetzte

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

mit

ng-repeat="image in inkObject.imageArray" 

und es funktionierte.

Answer 3

Es stellte sich heraus, dass, wie beide Kommentatoren vorgeschlagen haben, ich die Klammern herausnehmen musste, das heißt {{inkObject.imageArray}} sollte inkObject.imageArray sein. Allerdings hatte ich das versucht, als es vorgeschlagen wurde, und es funktionierte zunächst nicht. Was ich bemerkte, war, dass mein Browser die Daten von der Direktive zwischenspeichert, und so wurden die Bearbeitungen, die ich machte, nicht auf dem Bildschirm angezeigt. Offenbar kann das oft mit Direktiven in AngularJs passieren. Also pass auf das auf! Als ich das erkannte, fügte ich am Ende von templateUrl eine Abfragezeichenfolge hinzu und konnte dann tatsächlich sehen, welche Änderungen ich an der Direktive machte, und sah, dass ich nur die Klammern entfernen musste.