AngularJs 帮助，在传递给隔离范围的对象中选择数组时遇到问题

AngularJs help, trouble selecting array in object passed to isolation scope

本文关键字：选择 对象 数组 问题 遇到 范围 帮助 隔离 AngularJs      更新时间：2023-09-26

谁能告诉我我在这里做错了什么？ 是否可以按照我在这里尝试的方式插值图像数组？ 我知道该对象正在工作，因为 inkObject.header 属性可以很好地插入页面，但是具有各种图像的数组由于某种原因不起作用...... 我不确定它是否不允许你在对象内传递这样的数组，或者我只是做错了什么。

谢谢。 

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

你的指令应该：

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

默认值为 'A'（属性）

在模板中，ng-repeat的用法 

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

不需要{{ }}

我认为问题出在ng-repeat部分，您可以参考 plnkr：http://plnkr.co/edit/rPi20W9AVnJL6BGS1jEh?p=preview

我刚刚更换了

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

跟

ng-repeat="image in inkObject.imageArray"

它奏效了。

事实证明，就像两位评论者建议的那样，我需要去掉括号，即{{inkObject.imageArray}}应该是inkObject.imageArray。 但是，当有人建议时，我已经尝试过了，起初它不起作用。 我意识到我的浏览器正在缓存指令中的数据，因此我所做的编辑没有显示在屏幕上。 显然，这经常发生在 AngularJs 中的指令中。 所以，要小心！ 一旦我意识到这一点，我就将一个查询字符串添加到 templateUrl 的末尾，然后我实际上可以看到我对指令所做的编辑，并看到我所要做的就是删除括号。

相关文章：