将数据传递给AngularJS中的自定义指令
发布时间:2020-12-17 17:49:05 所属栏目:安全 来源:网络整理
导读:我有一个页面显示一堆使用http检索的图像缩略图.我使用ng-repeat来遍历数组并生成html. 这很好用. 我还创建了一个自定义指令,我将其作为属性绑定到ng-repeat生成的img元素. 这也很好. 但是,当我尝试将数据传递到我的自定义指令的范围时,它就会崩溃.数据绑定
我有一个页面显示一堆使用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 =和@之间的区别. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |