使用服务控制器之间的角共享数据 [英] Angular sharing data between controllers using service
问题描述
我使用的服务共享控制器之间的数据。
在第一个控制器我通话功能是这样的：
muscleGroupService.setState（真）;
下面是code在服务功能：
VAR状态; 函数的setState（X）{
状态= X;
}
x变成真实的，但出于某种原因，国家没有成为真正的，它保持未定义。
我该如何解决这个问题？
修改
我相信我已经成功地寻找到问题，但我不知道如何解决它。
index.html中我有这样的行code的：
＆LT; DIV CLASS =模式变脸NG-包括SRC =/内容/模板/情态动词/行政/ ModalMuscleGroup.html'ID =addModal＆GT; ＆LT; / DIV＆GT;
而一旦我得到第NG-包括包括ModalMuscleGroup.html和控制器模式窗口。
和我莫代尔widnow控制器，当我做不便。像这样的：
muscleGroupService.isItemBeingUpdated（）
它，因为我不看变量状态返回undefined。
我相信这可以使用$ rootScope和$ rootScope。$广播和$ rootScope修复。$上。有没有使用$ rootScope任何其他方式？
编辑2
下面是code：
CTRL1（应该将数据发送到服务）的部分：
$ scope.updateItem =功能（项目）{
muscleGroupService.setState（真）;
muscleGroupService.setItemForUpdate（项目）;
};
Relevat服务的部分：
app.angularModule.service（'muscleGroupService'，函数（清风，记录仪）{
breeze.config.initializeAdapterInstance（modelLibrary，备份存储，真正的）; VAR服务名=/微风/ MuscleGroup VAR经理=新breeze.EntityManager（服务名）; manager.enableSaveQueuing（真）; VAR的removeItem = breeze.core.arrayRemoveItem; 变种项= [];
VAR状态; VAR itemBeingUpdated;
返回{ 的setState：函数（X）{
状态= X;
}， isItemBeingUpdated：功能（）{
返回状态;
}， setItemForUpdate：函数（项目）{
itemBeingUpdated =项目;
}， getItemBeingUpdated：功能（）{
返回itemBeingUpdated;
}， 的updateItem：功能（）{
如果（itemBeingUpdated.entityAspect.entityState.isModified（））{
保存更改（）;
}
}，
下面是模式CTRL：
app.angularModule.controller（'AdminMuscleGroupModalCtrl'，函数（$范围，微风，muscleGroupService）{ $ scope.init =功能（）{
如果（muscleGroupService.isItemBeingUpdated（）==真）{
$ scope.itemBeingUpdated = muscleGroupService.getItemBeingUpdated（）;
$ scope.NewName = itemBeingUpdated.Name;
$ scope.NewDesc = itemBeingUpdated.Description;
}
}; $ scope.init（）;
}）;
下面是CTRL1 HTML的一部分：
＆LT;＆TBODY GT;
＆LT; TR数据-NG-重复=项中的项目＆GT;
＆所述; TD＆GT; {{item.Name}}
＆LT; / TD＆GT;
＆所述; TD＆GT; {{item.Description}}
＆LT; / TD＆GT;
＆所述; TD＆GT; ＆LT;按钮类=BTN BTN-主要数据-NG-点击=的updateItem（项目）数据切换=模态的href =＃addModal＆GT;＆LT; I类=glyphicon glyphicon铅笔＆GT ;＆LT; I＆GT /;编辑＆LT; /按钮＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT; ＆LT; DIV CLASS =模式变脸NG-包括SRC =/内容/模板/情态动词/行政/ ModalMuscleGroup.html'ID =addModal＆GT; ＆LT; / DIV＆GT;
和HTML模式：
＆LT; DIV CLASS =模体＆GT;
＆LT;窗体类=形横＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=inputName级=COL-LG-2控制标签＆GT;名称和LT; /标签＆gt;
＆LT; DIV CLASS =COL-LG-10＆GT;
＆LT;输入类型=文本级=表格控数据-NG-模式=新名称ID =inputName占位符=名称＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=inputDesc级=COL-LG-2控制标签＆GT;说明与LT; /标签＆gt;
＆LT; DIV CLASS =COL-LG-10＆GT;
＆LT;输入类型=文本级=表格控数据-NG-模式=NewDescID =inputDesc占位符=说明＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
我已经成功地解决我的问题，这个答案帮助：链接
所以，我做了这样的事情：
$ $范围手表（函数（）{返回muscleGroupService.getAction（）;}，函数（）{
如果（muscleGroupService.getAction（）==编辑）{
。$ $范围手表（函数（）{返回muscleGroupService.getItemForUpdate（）;}，函数（）{
$ scope.action =编辑;
$ scope.ItemForUpdate = muscleGroupService.getItemForUpdate（）;
$ scope.NewName = $ scope.ItemForUpdate.Name;
$ scope.NewDesc = $ scope.ItemForUpdate.Description;
}）;
}其他{
$ scope.action =增加;
$ scope.NewName =;
$ scope.NewDesc =;
}
}）;
不知道这是最好的做法，但它的工作原理：）
I'm using service to share data between controllers. In first controller I call function like this:
muscleGroupService.setState(true);
Here is code for function in service :
var state;
function setState(x) {
state = x;
}
x becomes true, but for some reason state doesn't become true, it stays undefined.
How can I fix this ?
Edit
I believe I've managed to find where problem is, but I'm not sure how to solve it.
In Index.html I have this line of code:
<div class="modal fade" ng-include src="'/Content/Templates/Modals/Admin/ModalMuscleGroup.html'" id="addModal"> </div>
And as soon as I get to page ng-include includes ModalMuscleGroup.html and controller for a modal window.
And I modal widnow controller when I do smth. like this:
muscleGroupService.isItemBeingUpdated()
It returns undefined as I don't watch variable state.
I believe this can be fixes using $rootScope and $rootScope.$broadcast and $rootScope.$on. Is there any other way without using $rootScope ?
Edit 2
Here is code:
Part of Ctrl1 (which should send data to service):
$scope.updateItem = function (item) {
muscleGroupService.setState(true);
muscleGroupService.setItemForUpdate(item);
};
Relevat parts of Service:
app.angularModule.service('muscleGroupService', function(breeze, logger) {
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
var serviceName = "/breeze/MuscleGroup";
var manager = new breeze.EntityManager(serviceName);
manager.enableSaveQueuing(true);
var removeItem = breeze.core.arrayRemoveItem;
var items = [];
var state;
var itemBeingUpdated;
return {
setState: function(x) {
state = x;
},
isItemBeingUpdated : function() {
return state;
},
setItemForUpdate : function(item) {
itemBeingUpdated = item;
},
getItemBeingUpdated : function() {
return itemBeingUpdated;
},
updateItem : function() {
if (itemBeingUpdated.entityAspect.entityState.isModified()) {
saveChanges();
}
},
Here is modal ctrl:
app.angularModule.controller('AdminMuscleGroupModalCtrl', function ($scope, breeze, muscleGroupService) {
$scope.init = function () {
if (muscleGroupService.isItemBeingUpdated() == true) {
$scope.itemBeingUpdated = muscleGroupService.getItemBeingUpdated();
$scope.NewName = itemBeingUpdated.Name;
$scope.NewDesc = itemBeingUpdated.Description;
}
};
$scope.init();
});
Here is part of html for Ctrl1 :
<tbody>
<tr data-ng-repeat="item in items">
<td>{{item.Name}}
</td>
<td>{{item.Description}}
</td>
<td> <button class="btn btn-primary" data-ng-click="updateItem(item)" data-toggle="modal" href="#addModal"><i class="glyphicon glyphicon-pencil"></i> Edit</button>
</tr>
</tbody>
<div class="modal fade" ng-include src="'/Content/Templates/Modals/Admin/ModalMuscleGroup.html'" id="addModal"> </div>
And modal html:
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" data-ng-model="NewName" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputDesc" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<input type="text" class="form-control" data-ng-model="NewDesc" id="inputDesc" placeholder="Description">
</div>
</div>
</form>
</div>
I've managed to solve my problem, this answer helped: link
So I've done something like this:
$scope.$watch( function() { return muscleGroupService.getAction(); }, function() {
if (muscleGroupService.getAction() == "edit") {
$scope.$watch(function () { return muscleGroupService.getItemForUpdate(); }, function () {
$scope.action = "edit";
$scope.ItemForUpdate = muscleGroupService.getItemForUpdate();
$scope.NewName = $scope.ItemForUpdate.Name;
$scope.NewDesc = $scope.ItemForUpdate.Description;
});
} else {
$scope.action = "add";
$scope.NewName = "";
$scope.NewDesc = "";
}
});
Not sure if this is best practice, but it works :)
这篇关于使用服务控制器之间的角共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
