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

Question

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

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

但是，当我尝试将数据传递到我的自定义指令的范围时，一切都会崩溃。数据绑定(bind)失败，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 = 之间有什么区别？和 @ .