用于在两个控制器

时间:2017-05-10 06:23:53

标签: javascript angularjs

我有两个页面,其中有一个包含一些功能的常用选项卡。我已经为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在所有方法中大量使用,这些方法在两个标签中都很常见,所以我想有一个常见的js文件,我将保留所有这些常见的变量和方法,以便我不会必须在2页的控制器中复制粘贴所有这些方法,以避免代码重复。

我找到了一个像下面这样的示例,但我没有得到如何共享方法和复杂变量,如我的$ scope.myObj:

How to share common logic between controllers?

2 个答案:

答案 0 :(得分:2)

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

创建一个工厂,您可以在其中放置常用变量值

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';
    }

答案 1 :(得分:1)

创建一个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