Angularjs:相机幻灯片jquery插件在部分视图中不工作

Question

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

现在，当我在不进行局部视图的情况下运行主页时，它运行得很好，但当我使用路由并将此插件放在局部视图中时，它就不起作用了？

这是我的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)
        }
})

并指定元素的指令属性

<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>

现在它像一个符咒一样工作：）

Answer 2

AngularJS中的相机指令

选项->http://www.pixedelic.com/plugins/camera/

.directive('camera', [
  "$compile", "$timeout", function($compile, $timeout) {
    return {
      restrict: 'A',
      scope: {
        options: '='
      },
      link: function($scope, element, attr) {
        return $timeout(function() {
          return jQuery(element).camera($scope.options);
        }, 500);
      }
    };
  }
]);

<div camera options="{thumbnails: true, pagination: false, height: '296px', fx: 'simpleFade', time: 5000}" class="camera_wrap camera_green_skin">
  <div ng-repeat="imagem in imagens" data-thumb="{{imagem.thumb}}" data-src="{{imagem.media | seguro}}"></div>
</div>