更新从父控制器服务价值 [英] Update a service value from a parent controller

查看：147 发布时间：2016/4/11 20:28:43 javascript angularjs

本文介绍了更新从父控制器服务价值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在寻找了几个小时如何更新从嵌套控制器服务价值。结果
我的孩子控制器需要更新的服务的价值。和值需要在父控制器中显示

我做了一个的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/

\r
\r
VAR应用= angular.module（MyApp的，[]）;\r \r angular.module（MyApp的）\r 。服务（'authenticationSrv'，函数（）{\r     VAR用户= {名称：'匿名'};\r     返回{\r         的getUser：功能（）{\r             返回用户;\r         }，\r         setUserName：函数（值）{\r             user.name =价值;\r         }\r     };\r }）;\r \r angular.module（MyApp的）\r .controller（parentCtrl功能（$范围，authenticationSrv）{\r     $ scope.user = authenticationSrv.getUser（）;\r }）;\r \r angular.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;
\r
\r
\r
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>
这篇关于更新从父控制器服务价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

更新从父控制器服务价值 [英] Update a service value from a parent controller

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

更新从父控制器服务价值 [英] Update a service value from a parent controller

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭