Question

我一直致力于将纯静态网站转换为AngularJS网站 - 只是为了提高我的技能。

到目前为止，到目前为止，我已经完成了路线并且看起来很好。

现在在主页上，我使用 ng-repeat 指令加载了滑块图像，它也正常工作。但是我注意到滑块本身并没有使用它所假设的功能。所以我发现我在一个单独的js文件上创建的jQuery函数根本没有加载。我还发现，这可以通过在指令中集成插件调用来实现。

所以，我做了这个：

app.directive('featuredSlider', [function() {
return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
        $(elem).owlCarousel({
            itemsCustom: [
                [0, 1],
                [600, 2],
                [1200, 4]
            ],
            autoPlay: 3000
        });
    }
};}]);

我使用 OwlCarousel 作为滑块，并且没有使用我上面的那个触发它。

顺便说一句，这就是我的控制器的样子：

app.controller('HomeController', function($scope) {
$scope.featuredImages = []; }

上面的 featuredImages 数组包含滑块的图片网址。

然后，这是滑块所在的部分。

<div class = "featured owl-carousel owl-theme featured-slider">
     <div class = "item" ng-repeat = "featured in featuredImages">
       <img ng-src = "{{featured.img}}" />
     </div>
</div>

任何可以帮助我的人？我尝试了几种方法，但仍然没有出现并正常工作。

先谢谢！

Answer 1

使用指令的控制器并将第三方库作为服务，以便您可以在指令控制器中注入依赖项。

Answer 2

以这种方式创建依赖项： f.e：

//Import moment.js into your page as always
<script type="text/javascript"
        src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"/>

//Before your main app module is declared, declare a momentjs module
angular.module('momentjs',[])
  //And on the momentjs module, declare the moment service that we want
  // available as an injectable
  .factory('moment', function ($window) {
    if($window.moment){
      //Delete moment from window so it's not globally accessible.
      //  We can still get at it through _thirdParty however, more on why later
      $window._thirdParty = $window._thirdParty || {};
      $window._thirdParty.moment = $window.moment;
      try { delete $window.moment; } catch (e) {$window.moment = undefined;
      /*<IE8 doesn't do delete of window vars, make undefined if delete error*/}
    }
    var moment = $window._thirdParty.moment;
    return moment;
  });

然后以这种方式放置指令以分配自己的控制器：

 angular.module("example").directive('exampleDirective', [function () {
    return {            
        templateUrl: 'path',
        restrict: 'AE',
        transclude:true,
        controller: 'myDirectiveController'
    };
 }]).controller('myDirectiveController',myDirectiveController);


 function myDirectiveController($scope , $element, $attrs, moment ) {
        //and now you can use this thir party library in the directive controller.
    }

在AngularJS指令中集成jQuery插件调用

2 个答案: