Question

我有一个页面显示了一堆使用http检索的图像缩略图。我使用ng-repeat来遍历数组并生成html 这很好。

我还创建了一个自定义指令，我将其作为属性绑定到由ng-repeat生成的img元素这也很好。

然而，当我尝试将数据传递到我的自定义指令的范围时，它们都崩溃了。数据绑定失败，ng-repeat不替换图像的url，所以我最终获得404，因为url无效。这几乎就是它。

非常感谢任何帮助，因为我是Angular的新手。

我的html模板：

<div class="portfolioContent">
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 col-padding" ng-repeat="gImg in gPhotos">
        <div class="photoframe">
                <img src="{{gImg.thumbnailUrl}}" url="{{gImg.imageUrl}}" image-gallery>
        </div>
    </div>

和我的自定义指令：

myApp.directive('imageGallery',function(){

return {
    restrict: 'A',
    scope: {
      url: '='
    },
    controller: function($scope){
        console.log($scope.url);
    }
}

}）;

Answer 1

尝试更改

scope: {
  url: '='
},

到

scope: {
  url: '@'
},

有关一个非常简单的示例，请参阅here。检查控制台。请参阅here =与@之间的区别。

Answer 2

指定范围：{url：'='}时，指定双向模型绑定。作为'url'传递的属性应该是模型，而不是插值字符串。

试试这个：

<img ng-src="gImg.thumbnailUrl" url="gImg.imageUrl" image-gallery>

Answer 3

为什么要尝试隔离范围？

试试这个：

        myApp.directive('imageGallery',function(){
        return {
            restrict: 'A',
            link : function(scope,element.attributes){
                   console.log(attributes.url);
                  // will log your URL as an atribute
                  // here you can bind an even to do your job , Eg : click , mouseover
             }
        }
        });

将数据传递给AngularJS中的自定义指令

3 个答案: