我有两个页面,其中我有一个包含一些功能的通用选项卡。我已经为该选项卡准备好了 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 页的两个控制器中以避免代码重复。
我找到了下面 1 个示例,但我不了解如何共享方法和复杂变量,例如我的 $scope.myObj:
如何在控制器之间共享公共逻辑?
您可以简单地使用角度工厂并在控制器中使用它来获取公共变量值。这是许多可能的方法之一
创建一个工厂,在其中放置公共变量值
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';
}
创建一个 Angular 服务服务,也许我们可以使用 myService
.在服务中,请确保不会通过为其分配新值来重置共享对象的引用。您只需更改该值。
例如:在myService
app.service('myService', ['configService', '$http', '$log', '$q',
function (configService, $http, $log, $q) {
var self = this;
var self.sharedObjects ={};
}
添加作为 myService.sharedObjects 的属性共享的所有对象
不要为 myService.shareObject 分配新值,但您可以将属性设置为myService.shareObjects
例如
myService.shareObjects.prop1,myService.shareObjects.prop2