jquery - Angular js : camera slideshow jquery plugin is not working in partial view

Question

我正在创建一个简单的网站，其中有相机幻灯片 jquery 插件来显示图像。

现在，当我运行主页而不进行部分 View 时，它运行完美，但是当我使用路由并将此插件放在部分 View 中时，它不起作用？

这是我的 app.js 代码:

angular.module('sliderApp', [
   'sliderController',
   'ngRoute'
])
.config(["$routeProvider", function($routeProvider) {
    $routeProvider.
       when("/",{templateUrl: "partials/home.html", controller: "myController"}).
       otherwise({redirectTo: "/"});
}]);

这是controller.js代码:

angular.module('sliderController',[])
   .controller('myController', function($scope) {
   $scope.images = [
      {
        bigimage :  'camera/images/slides/bridge.jpg',
        thumb : 'camera/images/slides/thumbs/bridge.jpg'
      },
      {
        bigimage :  'camera/images/slides/leaf.jpg',
        thumb : 'camera/images/slides/thumbs/leaf.jpg'
      },
      {
        bigimage :  'camera/images/slides/road.jpg',
        thumb : 'camera/images/slides/thumbs/road.jpg'
      },
      {
        bigimage :  'camera/images/slides/sea.jpg',
        thumb : 'camera/images/slides/thumbs/sea.jpg'
      }

];
});

有人可以告诉我它是如何工作的吗？提前致谢。

Answer 1

花了一周时间，我找到了解决方案。为了克服这个问题，我制定了一个指令

.directive('camSlider', function($timeout) {
        return function(scope, el, attrs) {
            $timeout((function() {
                el.camera({
                    thumbnails: true
                })
            }), 100)
        }
})

并为元素指定了directive属性

<div class="camera_wrap camera_azure_skin" id="camera_wrap_1" ng-controller="myController" cam-slider>
<div ng-repeat="slide in slides" data-thumb="{{slide.thumb}}" data-src="{{slide.bigimage}}"></div>
</div>

现在它就像一个魅力:)