Связывание Угловой сервисный объект к контроллеру Объем и модификация

Question

У меня есть EmployeeService, который я закачиваю в EmployeeController. Объект EmployeeService содержит объект.

Я связываю объект Service в контроллер Область применения:

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

В моих шлепнуть, работ Сотрудник управления/службы и менеджер контроллера/услуг не делает.

Если кто-нибудь может помочь мне понять, что происходит, я бы очень признателен.

Answer 1

Вам нужен контроллер, чтобы следить за изменениями в менеджере.

$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

Answer 2

Это связано с тем, что угловой нарушает оригинальный объект. Если вы объявите {{employee.name}}, угловые начните просмотр ссылки на объект для изменений. Как вы сказали: изменения в EmployeeService.getEmployee().name были замечены и отражены в поле зрения.

Но EmployeeService.setEmployee({name: 'new name'}) заменяет наблюдаемый объект новым объектом, в то время как угловым остается оригинальное. Следовательно, ваше изменение не распознается угловым, и представление не обновляется.