在两个控制器之间共享变量和方法的通用 JS 文件答案

【问题标题】：Common JS file to share variable and methods between two controllers在两个控制器之间共享变量和方法的通用 JS 文件
【发布时间】：2017-10-08 15:46:27
【问题描述】：

我有两个页面，其中有 1 个包含一些功能的通用选项卡。我已经为 1 页的该选项卡准备好代码，现在我想在第二页中重用所有这些代码，而无需复制代码。

例如，这是我的标签页 1 的代码：

app.controller('myCtrl', ['$scope', '$window', 'myService', '$filter', function ($scope, $window, myService,$filter) {
 $scope.myObj = [
                          {id:1,location : null},
                          {id:2,location : null}
                ]

 //Lots of other variables here which are common and will be used in both the tabs and lots of methods which are also common 
}]);

$scope.myObj 在两个选项卡中通用的所有方法中都大量使用，因此我希望有 1 个通用 js 文件，我将在其中保留所有这些通用变量和方法，这样我就不必将所有这些方法复制粘贴到两个页面的控制器中以避免代码重复。

我找到了 1 个如下示例，但我不知道如何共享方法和复杂变量，例如我的 $scope.myObj：

How to share common logic between controllers?

【问题讨论】：

您可以使用服务和工厂来实现代码的重用性。参考此链接希望对您有所帮助：blog.thoughtram.io/angular/2015/07/07/…
stackoverflow.com/questions/21919962/…的可能重复
stackoverflow.com/questions/43693072/…的可能重复
@Learning 接受答案

标签： javascript angularjs

【解决方案1】：

您可以简单地使用角度工厂并在您的控制器中使用它来获取公共变量值。这是许多可能的方法之一

创建一个放置公共变量值的工厂

angular.module("commonmodule", [])
    .factory('sharedFactory', function () {
        var sharedVariable = 1;
        return {
            getSharedValue : function () {
                return sharedVariable;
            },
            setSharedValue : function (newValue) {
                sharedVariable =  newValue;
            }
        }   
}});

只需在控制器中注入上述工厂并使用它们：

第一控制器：

angular.module('maincontrollerone', ["commonmodule"])
    .controller('controllerone', ["$scope", "sharedFactory", function ($scope, sharedFactory) {
        sharedFactory.setSharedValue("someValueFromCtr1");
    }

第二控制器

angular.module('maincontrollertwo', ["commonmodule"])
    .controller('controllertwo', ["$scope", "sharedFactory", function ($scope, sharedFactory) {
        $scope.value1 = sharedFactory.getSharedValue();
        // value of $scope.value1 = 'someValueFromCtr1';
    }

【讨论】：

赞成您为帮助我所做的努力，但您能否在您的工厂向我展示我将如何使用我的 $scope.myObj？
@Learning 取决于要求。为什么要在工厂中使用 $scope.myObj？您只是想处理价值并获得结果，还是想将该数据传递给另一个控制器。在这两种情况下，您都可以使用工厂实现该结果。

【解决方案2】：

创建一个Angular Service服务，也许我们可以使用myService。在服务中，确保您没有通过为其分配新值来重置 sharedObject 的引用。您只需更改值即可。

例如：myService

app.service('myService', ['configService', '$http', '$log', '$q',
        function (configService, $http, $log, $q) {

  var self = this;
  var self.sharedObjects ={};
}

将所有共享的对象添加为 myService.sharedObjects 的属性

不要为 myService.shareObjects 分配新值，但您可以将属性设置为 myService.shareObjects 之类的

 myService.shareObjects.prop1,myService.shareObjects.prop2

【讨论】：