Общие переменные и несколько контроллеров AngularJS

Не полагайтесь на беспорядочные трансляции, если ваша цель — просто отобразить и изменить данные в шаблоне контроллера.

Вашим контроллерам НЕ нужно «знать», когда сервис или фабрика обновились, чтобы использовать их в шаблоне, поскольку Angular сделает это за вас, поскольку вы получаете доступ к данным через точечную нотацию. Это важная концепция, о которой вы должны узнать больше.

Этот Fiddle показывает оба способа доступа к данным и то, как использование объекта-контейнера в шаблоне заставляет Angular повторно проверять один и тот же фактический объект при изменениях — вместо примитивного строкового значения, хранящегося в контроллере:

http://jsfiddle.net/a01f39Lw/2/

Шаблон:

<div ng-controller="Ctrl1 as c1">
    <input ng-model="c1.Bands.favorite" placeholder="Favorite band?">
</div>
<div ng-controller="Ctrl2 as c2">
    <input ng-model="c2.Bands.favorite" placeholder="Favorite band?">
</div>

JS:

var app = angular.module("app", []);      

app.factory('Bands', function($http) {
    return {
        favorite: ''
    };    
});

app.controller('Ctrl1', function Ctrl1(Bands){
    this.Bands = Bands;
});
app.controller('Ctrl2', function Ctrl2(Bands){
    this.Bands = Bands;
});

Прежде всего, давайте начнем с хороших практик, а затем решим вашу проблему здесь...

Надлежащая практика

По крайней мере, насколько мне известно, я не собираюсь использовать сервисы так, как вы... видите ли, сервисы больше похожи на объекты. поэтому, если бы я преобразовал вашу службу так, как я обычно ее использую, я бы получил следующее:

app.service('selectedEmployee', [selectedEmployeeService])

    function selectedEmployeeService(){
      this.selected = null;
      this.getSelected = function(){
        return this.selected;
      }
      this.postSelected = function(emp){
        this.selected = emp;
      }
    }

Вы видите, что я поместил функцию отдельно, а также сделал службу фактическим объектом. Я бы рекомендовал вам отформатировать аргумент функции контроллера следующим образом... Если вы хотите обсудить/увидеть передовой опыт, перейдите здесь. Навсегда достаточно о передовой практике, теперь к реальной проблеме.

Решение проблемы

Хорошо, Эндрю действительно понял это!! Проблема была в том, что ему нужно транслировать свое сообщение с помощью $rootScope:

$rootScope.$broadcast('selected:updated', $scope.selected);

И затем вы должны проверить, когда обновляется $scope.selected.. вроде как $scope.$watch...

$scope.$on('selected:updated', function(event, data) {
          $scope.selected = data;
})

После этого он автоматически обновляется и работает! Надеюсь, это помогло!

PS: Не знал, что он уже ответил...

Итак, после долгих исследований и большой помощи от Dsafds я смог использовать $rootScope.$broadcast для уведомления мой частичный взгляд на изменение переменной.

Если вы выполняете широковещательную рассылку из rootScope, она достигнет каждого дочернего контроллера, и вам не нужно устанавливать $watch в служебной переменной.

$scope.selectEmployee = function(employee) {
            selectedEmployee.postSelected(employee);
            $scope.selected = selectedEmployee.getSelected();
            $rootScope.$broadcast('selected:updated', $scope.selected);
            if ($mdSidenav('left').isOpen()) {
                $mdSidenav('left').close();
            }
        }

И в контроллере области основного контента

function ($scope) {
    $scope.$on('selected:updated', function(event, data) {
        $scope.selected = data;
    })
}

Я не думаю, что вам нужно передавать данные напрямую, вы также можете легко вызвать selectedEmployee.getSelected()

$rootScope также должен быть включен в родительский контроллер и широковещательный контроллер.