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

前端之家收集整理的这篇文章主要介绍了将数据传递给AngularJS中的自定义指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个页面显示一堆使用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);
    }
}

});

解决方法

尝试改变

scope: {
  url: '='
},

scope: {
  url: '@'
},

有关一个非常简单的示例,请参见here.检查控制台.请参阅here =和@之间的区别.

猜你在找的Angularjs相关文章