将Angular Service对象绑定到控制器作用域并更新

Binding Angular Service object to Controller Scope and updating

本文关键字：控制器 作用域 更新 绑定 Angular Service 对象      更新时间：2023-09-26

我有一个EmployeeService，我将它注入到EmployeeController中。EmployeeService包含一个对象。

我将服务对象绑定到控制器范围：

app.controller('EmployeeController', function($scope, EmployeeService) {
    $scope.employee = EmployeeService.getEmployee();
}

HTML模板显示员工的姓名：

{{employee.name}}

如果我在EmployeeService中操作employee对象。。。即EmployeeService.getEmployee().name = 'new name'，模板显示新名称。

但是，如果我替换EmployeeService中的employee对象。。。即CCD_ 7，模板不显示新名称。

为什么替换Service对象没有反映在模板中？

我有以下Plunk来证明这一点：http://plnkr.co/edit/k7oKd1VgsBvMGvVdP5kM?p=preview

在我的Plunk中，员工控制员/服务工作，经理控制员/服务不工作。

如果有人能帮我了解发生了什么，我将非常感谢。

您需要控制器来监视管理器的更改。

$scope.$watch(function() {
    return ManagerService.getManager();//<--when this changes
  }, function(newManager) { //<-- run this function
    $scope.manager = ManagerService.getManager();
  });

下面是一个更新的Plunkr，它有一种方法：http://plnkr.co/edit/YE72JcxDSFqfZLH32ERy?p=preview

这是因为angular观察原始对象的方式。如果声明{{employee.name}} angular，则开始观察对象参照是否发生更改。正如您所说：对EmployeeService.getEmployee().name的更改在视图中得到了正确的注意和反映。

但是EmployeeService.setEmployee({name: 'new name'})用新的对象替换被观察的对象，而angular仍然观察原始对象。因此，角度无法识别您的更改，视图也不会更新。

相关文章：