AngularJS сообщающееся событие/изменение от обслуживания до контроллера

Я пытаюсь установить связь между двумя контроллерами. Я знаю, что это можно сделать, подняв событие, а затем используя $ rootScope. $ Broadcast, но не рекомендуется для крупномасштабных приложений. Я видел много сообщений в блогах, которые рекомендуют использовать службу для общения, но не могут преуспеть в реализации. Мой реальный код является более сложным, но вот суть:AngularJS сообщающееся событие/изменение от обслуживания до контроллера

HTML:

<body ng-app="app"> 
    <div ng-controller="MainCtrl"> 
     <span>Source: {{count}}</span> 
     <button ng-click="updateCount()">Increase Count</button> 
    </div> 
    <div ng-controller="ListCtrl"> 
     Destination: {{updatedCount}} 
    </div> 
</body>

JS:

(function() { 

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

    app.factory("ShareDataSvc", function ($log) { 

     var currentCount = 0; 

     var set = function (val) { 
      $log.info('Setting service value to: ' + currentCount); 
      currentCount = val; 
     } 

     var get = function() { 
      return currentCount; 
     } 

     return { 
      set: set, 
      get: get 
     } 
    }); 

    app.controller("MainCtrl", ['$scope', 'ShareDataSvc', function ($scope, ShareDataSvc) { 
     $scope.count = ShareDataSvc.get(); 
     $scope.updateCount = function() { 
      $scope.count = $scope.count + 1; 
      ShareDataSvc.set($scope.count); 
     } 
    }]); 

    app.controller("ListCtrl", ["$scope", "ShareDataSvc", function ($scope, ShareDataSvc) { 
     $scope.updatedCount = ShareDataSvc.get(); 

     // trigger alert if count updated 
     $scope.triggerAlert = function() { 
      alert('Count updated!'); 
     } 
    }]); 
}());

Я пытаюсь понять, почему граф в пункте назначения не обновляется Угловой, хотя он связан с данными. Я понимаю, что когда счетчик обновляется в SharedDataSvc, свойство updatedCount будет пересчитано. Что я здесь делаю неправильно? Конечным результатом является запуск предупреждения при каждом обновлении счетчика.

источник

2015-07-20 JSRookie

Вы столкнулись с проблемой старой копии по значению. Когда вы делаете

$scope.updatedCount = ShareDataSvc.get();

Обновленный подсчет имущество устанавливается на значение, которое возвращается из вашей функции получить, и поэтому не видит будущие изменения стоимости отслеживается в службе. У вас есть два варианта обойти это. Один из них - добавить часы к каждому из ваших контроллеров для отслеживания значения в службе. Не идеально. Во-вторых, чтобы свойство объекта в вашей службе отслеживало значение, а данные связывают этот объект с вашей областью. Нечто подобное (заметьте, я только показать интересные части):

app.factory("ShareDataSvc", function ($log) { 

    var set = function (val) { 
     $log.info('Setting service value to: ' + currentCount); 
     this.data.count = val; 
    } 

    return { 
     data: {count: 0} 
     set: set 
    } 
}); 

app.controller("MainCtrl", ['$scope', 'ShareDataSvc', function ($scope, ShareDataSvc) { 
    $scope.data = ShareDataSvc.data; 
    $scope.updateCount = function() { 
     ShareDataSve.data.count++; // and increment function in the service would be better 
    } 
}]); 

app.controller("ListCtrl", ["$scope", "ShareDataSvc", function ($scope, ShareDataSvc) { 
    $scope.data = ShareDataSvc.data; 

}]);

Затем в HTML

<body ng-app="app"> 
    <div ng-controller="MainCtrl"> 
     <span>Source: {{data.count}}</span> 
     <button ng-click="updateCount()">Increase Count</button> 
    </div> 
    <div ng-controller="ListCtrl"> 
     Destination: {{data.count}} 
    </div> 
</body>

источник

2015-07-20 04:31:36

Ах .. Я вижу проблему. Привязка к фактическому значению обновляет счетчик в пункте назначения. Но я все еще не уверен, как вызвать предупреждение. Есть ли $ watch единственный вариант? – JSRookie

Это зависит от вашего варианта использования. Если вам нужно знать, когда оно изменяется в ваших контроллерах, вам нужно либо иметь часы, либо выпустить событие на корневой системе из службы, которую можно прослушать в вашем контроллере (более результативно, чем часы). –

Вам нужен пример или было описание, достаточное для вас? –

AngularJS сообщающееся событие/изменение от обслуживания до контроллера

ответ

Смежные вопросы