Question

我一直在搜索如何从嵌套控制器更新服务值的时间我的子控制器需要更新服务中的值。并且该值需要在父控制器中显示。

我已经做了一个jsfiddle，使它更清晰，更容易帮助 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();
});

（我已经阅读并尝试了Update parent scope variable，但我无法使用该服务。）

谢谢！

Answer 1

使用对象文字而不是变量username。

<强>父

app.controller("parentCtrl", function ($scope, authenticationSrv) {
    $scope.parentObject = {};
    $scope.parentObject.username = authenticationSrv.getUser();
});

儿童

app.controller("childCtrl", function ($scope, authenticationSrv) { authenticationSrv.setUser('my name'); $scope.parentObject.username = authenticationSrv.getUser(); });

工作示例

＆＃13;
＆＃13;
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.parentObject = {}; $scope.parentObject.username = authenticationSrv.getUser(); }); app.controller("childCtrl", function ($scope, authenticationSrv) { authenticationSrv.setUser('my name'); $scope.parentObject.username = authenticationSrv.getUser(); });
＆＃13;
<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>{{parentObject.username}}</p> <div ng-controller="childCtrl"> <p>{{parentObject.username}}</p> </div> </div> </body>
＆＃13;
＆＃13;
＆＃13;

Answer 2

由于user是服务中的原始值，当您使用此行将服务中的值放入控制器的范围时：

$scope.username = authenticationSrv.getUser();

user的值被复制到$scope.username。因此，只是因为稍后您在服务中覆盖user的值，您的父母＆＃34;中没有任何变化。 $范围。

有几种方法可以解决这个问题，最简单的方法可能是在您的服务中创建用户对象 - 如果您在范围中存储对此对象的引用，它将反映所做的更改从其他控制器到它。（javascript中的对象通过引用值传递，因此所有控制器都将影响同一个对象，而不是值的副本。）对于实际实现，我将引导您回到same link you posted - 当你尝试实现它时，它有什么问题？向我们展示您尝试过的代码。

或者，您也可以使用此服务实现观察者模式（这是相当多的工作），或者使用范围层次结构上的事件来通知控制器用户的更改（这是一个可疑的做法）。

Answer 3

我们的想法是创建和反对更新，而不仅仅是原语：

$scope.user = {};
$scope.user.name = authenticateSrv.getUser();

并在子范围内设置它：

$scope.user.name = authenticateSrv.setUser('my name');

这是一个Fiddle

从父控制器更新服务值

3 个答案:

工作示例