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

Question

I've been working on converting a plain static website into an AngularJS website - just to also improve my skills on that.

So far, I've done routes and looking good so far.

Now on the home page, I made slider images load using ng-repeat directive and it's also working. But I noticed something that the slider itself isn't working its supposed functionality. So I found out that the jQuery functions I made on a separate js file isn't loading at all. And I also found out that this can be achieved by integrating the plugin calls inside a directive.

So, I made this:

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

I'm using OwlCarousel for the slider and it's not being triggered using the one I did above.

By the way, this is how my controller look like:

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

The featuredImages array above has the image URLs for the slider.

And then, this is the part where the slider is.

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

Anyone who can help me out? I've tried out several methods but still not showing up and working.

Thanks in advanced!

Answer 1

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

Answer 2

Create the dependency in this way: fe:

//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;
  });

and then put the directive in this way to assign their own controller:

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