Question

我有EmployeeService注入EmployeeController。 EmployeeService包含一个对象。

我将Service对象绑定到Controller Scope：

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

HTML模板显示员工的姓名：

{{employee.name}}

如果我操纵EmployeeService中的员工对象...即EmployeeService.getEmployee().name = 'new name'，模板会显示新名称。

但是，如果我替换 EmployeeService中的员工对象...即EmployeeService.setEmployee({name: 'new name'})，则模板不会显示新名称。

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

我有以下插件来演示：http://plnkr.co/edit/k7oKd1VgsBvMGvVdP5kM?p=preview

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

如果有人能帮我理解发生的事情，我会非常感激。

Answer 1

这是因为角度观察原始物体的方式。如果声明{{employee.name}} angular开始观察对象引用的更改。正如您所说：EmployeeService.getEmployee().name的更改已被正确注意并反映在视图中。

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

Answer 2

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

$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 Service对象绑定到Controller Scope并进行更新

2 个答案: