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

Posted 2023-02-22

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

【英文标题】：Angular with Jquery - How to include jQuery into a factory and use / share that factory among multiple controllers?

【发布时间】：2017-06-16 06:04:17

【问题描述】：

我有一个更长的 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>

...

【问题讨论】：

控制器构造函数不使用返回值，那么当代码调用工厂函数并将该值返回给控制器构造函数时，您期望会发生什么？

如果我不返回而只是调用它，它也不起作用。

描述问题。“它不起作用”不是问题陈述。告诉我们预期的行为应该是什么。

好吧，这不起作用，我的意思是任何洞察 jQuery 函数的东西都没有被执行。仅当我将 jQuery 代码一次又一次地放入 5 个控制器中的每一个时才有效——而不是当我将其放入工厂并从控制器中调用它时。

在代码中加入一些console.log 语句。我想你会发现 jQuery 函数 is 正在执行，但不是在你期望的时候。在指令中，控制器是在 调用 postLink 函数之前构造的。

【参考方案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;
 );

【讨论】：

问题不是 jQuery 而是工厂。那是行不通的。

【参考方案2】：

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

【讨论】：

我做到了。 jQuery 自己工作。唯一不起作用的是，如果我将其放入工厂，然后尝试在控制器中调用工厂。

在您的工厂，您是否尝试过放置“return prodsFactory”？