[英]Pass array object from controller to custom directive in AngularJS
Im trying to pass a array of objects from a angular controller to a custom directive element and iterate the object with ng-repeat, but appears the following error: [ngRepeat:dupes] 我试图将对象的数组从角度控制器传递到自定义指令元素,并使用ng-repeat迭代该对象,但出现以下错误:[ngRepeat:dupes]
home.js: home.js:
home.controller("homeController", function ($scope) {
$scope.points =[
{
"url": '../assets/images/concert.jpg',
"id":1
},
{
"url": '../assets/images/dance.jpg',
"id":2
},
{
"url": '../assets/images/music.jpg',
"id":3
},
{
"url": '../assets/images/jazz.jpg',
"id":4
},
{
"url": '../assets/images/violin.jpg',
"id":5
},
{
"url": '../assets/images/music.jpg',
"id":6
}
];
});
Shareddirectives.js: Shareddirectives.js:
var sharedDirectives = angular.module("sharedDirectives", []);
sharedDirectives.directive("interestPoints", function () {
function link($scope, element, attributes, controller ) {
$(element).find('#interest-points').owlCarousel({
items : 4, //4 items above 1200px browser width
itemsDesktop : [1200,3], //3 items between 1200px and 992px
itemsDesktopSmall : [992,3], // betweem 992px and 768px
itemsTablet: [850,2], //1 items between 768 and 0
itemsMobile : [600,1] // itemsMobile disabled - inherit from itemsTablet option
});
}
return {
restrict: "E",
templateUrl : "../html/views/interest-points.html",
link: link,
scope: {
interestPoints: '@'
}
};
});
interest-points.html: 息points.html:
<div id="interest-points" class="owl-carousel">
<div ng-repeat="point in interestPoints" class="item">
<img ng-src="{{point.url}}" alt="Owl Image"><h4>27<br>JUL</h4>
</div>
</div>
home.html: home.html的:
<div ng-controller='homeController'>
<interest-points interest-points="{{points}}""></interest-points>
</div>
I tried with track by $index but the error don't appear and it don't iterate 我尝试通过$ index进行跟踪,但未出现错误并且它不会迭代
You are using interestPoints: '@'
as the method of binding interestPoints
to the scope. 您正在使用
interestPoints: '@'
作为将interestPoints
绑定到合并范围的方法。 That actually binds only the string {{points}}
to interestPoints
instead of actually evaluating that expression in the parent's scope. 实际上,这仅将字符串
{{points}}
绑定到interestPoints
而不是实际在父级范围内评估该表达式。
Use the interestPoints: '='
as the binding method and then interest-points="points"
to get the desired behaviour. 使用
interestPoints: '='
作为绑定方法,然后使用interest-points="points"
获得所需的行为。
Related docs under the heading Directive definition object . 指令定义对象下的相关文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.