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

Question

我有一个更长的 jQuery 函数用于图片库滑块。我有大约 5 个指令（全部使用带有不同图片的相同滑块）。因为我不想将相同的 jQuery 代码复制粘贴到所有 5 个控制器中，所以我使用了工厂。 我将 jQuery 代码放入工厂，然后在每个控制器中调用工厂。它不工作，但我不明白为什么。有谁知道吗？谢谢！ 编辑： Jquery 包含在角度和作品中！问题不在于 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

如果 jQuery 库脚本包含在 AngularJS 库脚本之前，则 jQuery 以angular.element 的形式提供。

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

要使用 jQuery，只需确保它在 angular.js 文件之前加载。您还可以使用 ngJq 指令指定 jqlite 应该在 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。