Question

我有一个更长的jQuery函数用于图像库滑块。我有大约5个指令（全部使用相同的滑块和不同的图片）。因为我不想复制将相同的jQuery代码粘贴到所有5个控制器中，所以我使用工厂完成了它。我将jQuery代码放入工厂，然后在每个控制器中调用工厂。它不起作用，但我不明白为什么。有谁知道吗？谢谢！编辑：Jquery包括bevor angular和作品！问题不是jQuery本身，而是工厂。如果我在所有控制器中反复使用相同的jQuery代码，那么它的工作原理。如果我把它放在工厂里它可以工作，并且工厂可以控制器。工厂：

app.factory('prodsFactory', function ($http) {
  var prodsFactory = {};
    prodsFactory.slider=function(){
       $(function(){
           ...
        })
     }
 })

第一指令：

app.directive('picturesProject', function () {
    return {
        restrict: 'E',
        templateUrl: 'projects/shop/picturesshop.html',
        scope: {},
        controller: 'shopCtrl',
        link: function(scope){
        }
 }

})

app.controller('shopCtrl', function($scope,prodsFactory){
        return prodsFactory.slider();
});

的index.html ...

<script src="projects/shop/picturesshop.directive.js"></script>

...

Answer 1

如果在AngularJS库脚本之前包含jQuery库脚本，则jQuery可用作angular.element。

如果jQuery可用，angular.element是jQuery函数的别名。如果jQuery不可用，angular.element委托给AngularJS的内置jQuery子集，称为“jQuery lite”或 jqLite。

要使用jQuery，只需确保它在angular.js文件之前加载。您还可以使用ngJq指令指定jQueryite应该用于jQuery，或者如果页面上存在多个版本，则使用特定版本的jQuery。

-- AngularJS angular.element API Reference

也就是说，工厂需要将某些东西归还给它的构造功能：

app.factory('prodsFactory', function ($http) {
  var $ = angular.element;
  var prodsFactory = {};
    prodsFactory.slider=function(){
      $(function(){
          console.log("jQuery prodsFactory slider invoked");
      });
    };
  //RETURN prodsFactory to construction function
  //vvvvvvvvvvvvvvvvv
  return prodsFactory;
 });

Answer 2

如果计划使用在angular的jquery lite实现中未实现的任何jquery函数，则需要在angularjs脚本之前包含jquery。

Angular with Jquery - 如何将jQuery包含到工厂中并在多个控制器之间使用/共享该工厂？

2 个答案: