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中的相机指令

选项 - ＆gt; 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>

Angularjs：相机幻灯片jquery插件在局部视图中不起作用

2 个答案: