Javascript 从父控制器更新服务值

我已经搜索了几个小时如何从嵌套控制器更新服务值。
我的子控制器需要更新服务中的值。该值需要显示在父控制器中

我已经做了一个JSFIDLE，以使其更清晰、更易于帮助

（我已经阅读并尝试过了，但我无法使它与服务一起工作。）

---

谢谢

As

user

是服务中的一个基本值，当您使用此行将该值从服务放入控制器的作用域时：

$scope.username = authenticationSrv.getUser();

user

的值被复制到

$scope.username

中。因此，只是因为稍后您在服务中覆盖了

user

的值，所以您的“父”$scope中没有任何变化

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

---

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

想法是创建和对象以更新，而不仅仅是一个原语：

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

在子范围中，您只需设置它：

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

---

下面是一个

使用对象文字而不是变量

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();
});

工作示例

var-app=angular.module（“MyApp”，[]）；
app.service（'authenticationSrv'，function（）{
var user='匿名'；
返回{
getUser:函数（）{
返回用户；
},
setUser:函数（值）{
用户=价值；
}
};
});
app.controller（“parentCtrl”，函数（$scope，authenticationSrv）{
$scope.parentObject={}；
$scope.parentObject.username=authenticationSrv.getUser（）；
});
app.controller（“childCtrl”，函数（$scope，authenticationSrv）{
authenticationSrv.setUser（“我的名字”）；
$scope.parentObject.username=authenticationSrv.getUser（）；
});

{{parentObject.username}

{{parentObject.username}

使服务中的
用户
成为对象，而不是原语（字符串）。然后在视图中使用
{{user.name}

请注意，我对
authenticationSrv.setUser（）做了一些小更改
并将其重命名为
authenticationSrv.setUserName（）

看我的工作小提琴：


var-app=angular.module（“MyApp”，[]）；
角度。模块（“MyApp”）
.service（'authenticationSrv'，函数（）{
var user={name:'anonymous'}；
返回{
getUser:函数（）{
返回用户；
},
setUserName:函数（值）{
user.name=值；
}
};
});
角度。模块（“MyApp”）
.controller（“parentCtrl”，函数（$scope，authenticationSrv）{
$scope.user=authenticationSrv.getUser（）；
});
角度。模块（“MyApp”）
.controller（“childCtrl”，函数（$scope，authenticationSrv）{
authenticationSrv.setUserName（“我的名字”）；
$scope.user=authenticationSrv.getUser（）；
});

{{user.name}

{{user.name}

您发布的链接显示了基本相同的问题。如果您尝试在那里实现解决方案但失败，请向我们展示您基于该答案尝试的代码！同样的小提琴。我想你需要用叉子。对不起。。小提琴被替换了
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();
});