我一直在寻找了几个小时如何更新从嵌套控制器服务价值。结果我的孩子控制器需要更新的服务的价值。和值需要在父控制器中显示
我做了一个的jsfiddle，使之更加清晰，便于帮助 http://jsfiddle.net/jtsmduxw/3/
＆LT;机身NG-应用=MyApp的＆GT; ＆LT; DIV NG控制器=parentCtrl＆GT; ＆LT; P＆GT; {{用户名}}＆LT; / P＆GT; ＆LT; DIV NG控制器=childCtrl＆GT; ＆LT; P＆GT; {{用户名}}＆LT; / P＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;＆LT; /身体GT; -
VAR应用= angular.module（MyApp的，[]）;app.service（'authenticationSrv'，函数（）{ VAR用户='匿名'; 返回{ 的getUser：功能（）{ 返回用户; }， SETUSER：函数（值）{ 用户=价值; } };}）;app.controller（parentCtrl功能（$范围，authenticationSrv）{ $ scope.username = authenticationSrv.getUser（）;}）;app.controller（childCtrl功能（$范围，authenticationSrv）{ authenticationSrv.setUser（我的名字'）; //我需要这个功能也更新父的范围 $ scope.username = authenticationSrv.getUser（）;}）; （我已阅读并尝试更新父作用域变量，但我不能让它的服务工作。）
谢谢！
解决方案
请用户在服务的对象，而不是一个原始的（字符串）。然后使用 {{user.name}} 在您的视图。
请注意，我做了一些小的改动 authenticationSrv.setUser（） 它重命名为 authenticationSrv.setUserName（）。
请参阅我的工作小提琴： https://jsfiddle.net/rbwk3rqb/
rr
VAR应用= angular.module（MyApp的，[]）;rrangular.module（MyApp的）r。服务（'authenticationSrv'，函数（）{r VAR用户= {名称：'匿名'};r 返回{r 的getUser：功能（）{r 返回用户;r }，r setUserName：函数（值）{r user.name =价值;r }r };r}）;rrangular.module（MyApp的）r.controller（parentCtrl功能（$范围，authenticationSrv）{r $ scope.user = authenticationSrv.getUser（）;r}）;rrangular.module（MyApp的）r.controller（childCtrl功能（$范围，authenticationSrv）{r authenticationSrv.setUserName（我的名字'）;r $ scope.user = authenticationSrv.getUser（）;r}）; r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js"></script>r＆LT;机身NG-应用=MyApp的＆GT;r ＆LT; DIV NG控制器=parentCtrl＆GT;r ＆所述p为H.; {{user.name}}＆下; / P＆GT;r ＆LT; DIV NG控制器=childCtrl＆GT;r ＆所述p为H.; {{user.name}}＆下; / P＆GT;r ＆LT; / DIV＆GT;r ＆LT; / DIV＆GT;r＆LT; /身体GT; rrr
I've been searching for hours how to update a service value from a nested controller. My child controller needs to update a value in a service. And that value needs to be shown in the parent controller.
I've made a jsfiddle to make it more clear and easy to help http://jsfiddle.net/jtsmduxw/3/
<body ng-app="MyApp">
<div ng-controller="parentCtrl">
<p>{{username}}</p>
<div ng-controller="childCtrl">
<p>{{username}}</p>
</div>
</div>
</body>
-
var app = angular.module("MyApp", []);
app.service('authenticationSrv', function () {
var user = 'anonymous';
return {
getUser: function () {
return user;
},
setUser: function (value) {
user = value;
}
};
});
app.controller("parentCtrl", function ($scope, authenticationSrv) {
$scope.username = authenticationSrv.getUser();
});
app.controller("childCtrl", function ($scope, authenticationSrv) {
authenticationSrv.setUser('my name'); // I need this function to also update the scope of the parent
$scope.username = authenticationSrv.getUser();
});
(I've read and tried Update parent scope variable, but I could not make it work with the service.)
Thanks!
解决方案Make user in the Service an object instead of a primitive (string). Then use {{user.name}} in your view.
Notice that I did some minor changes to authenticationSrv.setUser()
and renamed it to authenticationSrv.setUserName().
See my working fiddle: https://jsfiddle.net/rbwk3rqb/
var app = angular.module("MyApp", []);
angular.module("MyApp")
.service('authenticationSrv', function () {
var user = {name: 'anonymous'};
return {
getUser: function () {
return user;
},
setUserName: function (value) {
user.name = value;
}
};
});
angular.module("MyApp")
.controller("parentCtrl", function ($scope, authenticationSrv) {
$scope.user = authenticationSrv.getUser();
});
angular.module("MyApp")
.controller("childCtrl", function ($scope, authenticationSrv) {
authenticationSrv.setUserName('my name');
$scope.user = authenticationSrv.getUser();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
<div ng-controller="parentCtrl">
<p>{{user.name}}</p>
<div ng-controller="childCtrl">
<p>{{user.name}}</p>
</div>
</div>
</body>
相关推荐
最新文章