각도 컨트롤러에서 사용자 지정 지시문 요소로 개체 배열을 전달하고 ng-repeat로 개체를 반복하려고하지만 다음 오류가 나타납니다. [ngRepeat : dupes]
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 :
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 :
<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 :
<div ng-controller='homeController'>
<interest-points interest-points="{{points}}""></interest-points>
</div>
$ index로 트랙을 시도했지만 오류가 나타나지 않고 반복되지 않습니다.
범위 interestPoints: '@'
에 바인딩하는 방법으로 사용 하고 interestPoints
있습니다. 즉 실제로 단지 문자열 결합 {{points}}
을 interestPoints
대신 실제로 부모의 범위에서 그 표현을 평가합니다.
를 사용하여 interestPoints: '='
다음 바인딩 방법으로하고 interest-points="points"
원하는 동작을 얻을 수 있습니다.
Directive definition object 제목 아래의 관련 문서 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다