我正在创建一个个人网站，我正在使用owl-carousel lib。用于可滚动和可拖动的图像。 我的index.html代码是：
<side-scroll ng-controller="imgListCtrl"></side-scroll>
我的controller.js是：
App.controller('imgListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('json-file/my_pic.json').success(function(data) {
$scope.profile = data;
var profile= $scope.profile
Object.size = function(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key))
size++;
}
return size;
console.log(size);
};
// Get the size of an object
var totalNumberOfProfile = Object.size(profile);
console.log(totalNumberOfProfile);
$scope.totalNumberOfProfile= totalNumberOfProfile;
$scope.categoryOfProfile="Remaining Pictures ";
$scope.remove = function(index){
$scope.totalNumberOfProfile--;
profile.splice(index,1);
};
$scope.updatedProfile= profile;
});
}]);
App.directive("owlCarousel", function() {
return {
restrict: 'E',
transclude: false,
link: function (scope) {
scope.initCarousel = function(element) {
// provide any default options you want
var defaultOptions = {
};
var customOptions = scope.$eval($(element).attr('data-options'));
// combine the two options objects
for(var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
// init carousel
$(element).owlCarousel(defaultOptions);
};
}
};
})
App.directive('owlCarouselItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
// wait for the last item in the ng-repeat then call init
if(scope.$last) {
scope.initCarousel(element.parent());
}
}
};
}]);
App.directive('sideScroll', function() {
return {
restrict: 'E',
templateUrl: 'side_scroll.html'
};
});
我的side_scroll.html是：
<div class="discover_hd">{{categoryOfProfile}} <span>({{totalNumberOfProfile}})</span></div>
<data-owl-carousel class="owl-carousel" data-options="{ pagination: false, items : 6, itemsDesktopSmall : [760,2.5],
itemsTablet: [490,2] ,itemsMobile : [400,1.7], itemsDesktop : [1200,3.5]}">
<div owl-carousel-item="" ng-repeat="profile in updatedProfile track by $index" >
<!-- Panel in owl carousel -->
<li>
<div class="thumbnail_photo">
<button class="close" ng-click="remove($index)">
<span class="glyphicon glyphicon-remove"></span>
</button>
<a href="#/home/{{profile.id}} " target="_blank"><span class="discover_pic_container" style="background:url({{profile.imageUrl}}) no-repeat left top;background-size:188px 233px;"></span></a>
<div class="discover_transparent">
<div class="discover_name">{{profile.name}}</div>
</div>
</div>
<button class="connect_btn btn-lg" ng-click="remove()">Connect</button>
</li>
</div>
</data-owl-carousel>
点击连接或＆＃34; x＆＃34;按钮owl-carousel功能失真，它停止工作。
请给我任何解决方案