Оновити значення області дії, коли дані служби змінюються

У моєму додатку є така послуга:

uaInProgressApp.factory('uaProgressService', 
    function(uaApiInterface, $timeout, $rootScope){
        var factory = {};
        factory.taskResource = uaApiInterface.taskResource()
        factory.taskList = [];
        factory.cron = undefined;
        factory.updateTaskList = function() {
            factory.taskResource.query(function(data){
                factory.taskList = data;
                $rootScope.$digest
                console.log(factory.taskList);
            });
            factory.cron = $timeout(factory.updateTaskList, 5000);
        }

        factory.startCron = function () {
            factory.cron = $timeout(factory.updateTaskList, 5000);
        }

        factory.stopCron = function (){
            $timeout.cancel(factory.cron);
        }
        return factory;
});

Потім я використовую його в контролері, як це:

uaInProgressApp.controller('ua.InProgressController',
    function ($scope, $rootScope, $routeParams, uaContext, uaProgressService) {
        uaContext.getSession().then(function(){
            uaContext.appName.set('Testing house');
            uaContext.subAppName.set('In progress');
            uaProgressService.startCron();

            $scope.taskList = uaProgressService.taskList;
        });
    }
);

Тому в основному моя служба оновлень factory.taskListкожні 5 секунд , і я пов'язав це factory.taskListз $scope.taskList. Потім я спробував різні методи, такі як $apply, $digestале зміни factory.taskListв моєму контролері та поданні не відображаються $scope.taskList.

Він залишається порожнім у моєму шаблоні. Чи знаєте ви, як я можу поширити ці зміни?

Хоча використання $watchможе вирішити проблему, це не найефективніше рішення. Можливо, ви захочете змінити спосіб зберігання даних у службі.

Проблема полягає в тому, що ви замінюєте місце пам’яті, з яким taskListпов’язано, кожного разу, коли ви присвоюєте йому нове значення, коли область застрягла, вказуючи на старе місце. Ви можете бачити, як це відбувається в цьому планку .

Робіть кучу знімків з Chrome, коли ви вперше завантажуєте плагін, і після натискання кнопки ви побачите, що розташування пам'яті, на яке вказує область, ніколи не оновлюється, тоді як список вказує на інше місце пам'яті.

Ви можете легко це виправити, якщо ваша служба має об’єкт, що містить змінну, яка може змінитися (щось на зразок data:{task:[], x:[], z:[]}). У цьому випадку "дані" ніколи не слід міняти, але будь-який його учасник може бути змінений, коли вам потрібно. Потім ви передаєте цю змінну даних в область дії, і поки ви не перевизначаєте її, намагаючись призначити "дані" чомусь іншому, кожен раз, коли поле всередині даних змінює область, буде знати про це і буде правильно оновлюватися.

Цей плагін показує той самий приклад, що працює за допомогою виправлення, запропонованого вище. Не потрібно використовувати будь-яких спостерігачів у цій ситуації, і якщо трапляється, що щось не оновлюється у поданні, ви знаєте, що все, що вам потрібно зробити, це запустити область $applyдля оновлення подання.

Таким чином ви усуваєте необхідність спостерігачів, які часто порівнюють змінні для змін та потворних налаштувань, пов’язаних із випадками, коли вам потрібно спостерігати за багатьма змінними. Єдина проблема такого підходу полягає в тому, що у вашому поданні (html) у вас будуть "дані". префікс у всьому, де раніше ви мали просто ім’я змінної.

Angular (на відміну від Ember та деяких інших фреймворків), не забезпечує особливих загорнутих об’єктів, які напівчаровно синхронізуються. Об'єкти, якими ви маніпулюєте, є звичайними об'єктами javascript, і, як кажуть var a = b;, не пов’язують змінні aі b, кажучи $scope.taskList = uaProgressService.taskList, не пов’язують ці два значення.

Для такого роду link-ву, angularзабезпечує $watchна$scope . Ви можете спостерігати за значенням uaProgressService.taskListі оновлювати значення, $scopeколи воно змінюється:

$scope.$watch(function () { return uaProgressService.taskList }, function (newVal, oldVal) {
    if (typeof newVal !== 'undefined') {
        $scope.taskList = uaProgressService.taskList;
    }
});

Перший вираз, переданий $watchфункції, виконується в кожному $digestциклі, а другий аргумент - це функція, яка викликається із новим та старим значенням.

Я не впевнений, чи це допомагає, але те, що я роблю, це прив'язка функції до $ scope.value. Наприклад

angular
  .module("testApp", [])
  .service("myDataService", function(){
    this.dataContainer = {
      valA : "car",
      valB : "bike"
    }
  })
  .controller("testCtrl", [
    "$scope",
    "myDataService",
    function($scope, myDataService){
      $scope.data = function(){
        return myDataService.dataContainer;
      };
  }]);

Тоді я просто прив'язую це в DOM як

<li ng-repeat="(key,value) in data() "></li>

Таким чином ви можете уникнути використання $ watch у своєму коді.

Ні $watchабо тощо не потрібно. Ви можете просто визначити наступне

uaInProgressApp.controller('ua.InProgressController',
  function ($scope, $rootScope, $routeParams, uaContext, uaProgressService) {
    uaContext.getSession().then(function(){
        uaContext.appName.set('Testing house');
        uaContext.subAppName.set('In progress');
        uaProgressService.startCron();
    });

    $scope.getTaskList = function() {
      return uaProgressService.taskList;
    };
  });

Оскільки функція getTaskListналежить до $scopeїї поверненого значення, буде обчислюватися (та оновлюватися) при кожній змініuaProgressService.taskList

Легка альтернатива полягає в тому, що під час ініціалізації контролера ви підписуєтесь на шаблон сповіщувача, встановлений у службі.

Щось на зразок:

app.controller('YourCtrl'['yourSvc', function(yourSvc){
    yourSvc.awaitUpdate('YourCtrl',function(){
        $scope.someValue = yourSvc.someValue;
    });
}]);

А послуга має щось на зразок:

app.service('yourSvc', ['$http',function($http){
    var self = this;
    self.notificationSubscribers={};
    self.awaitUpdate=function(key,callback){
        self.notificationSubscribers[key]=callback;
    };
    self.notifySubscribers=function(){
        angular.forEach(self.notificationSubscribers,
            function(callback,key){
                callback();
            });
    };
    $http.get('someUrl').then(
        function(response){
            self.importantData=response.data;
            self.notifySubscribers();
        }
    );
}]);

Це може дозволити вам більш ретельно налаштуватися, коли ваші контролери оновлюються від служби.

Як сказав Габріель П'яченті, годинники не потрібні, якщо ви обертаєте дані, що змінюються, в об'єкт.

АЛЕ для коректного оновлення змінених службових даних у області, важливо, щоб значення області дії контролера, який використовує службові дані, не вказувало безпосередньо на змінні дані (поле). Натомість значення області має вказувати на об'єкт, який обертає дані, що змінюються.

Наступний код повинен пояснити це більш чітко. У моєму прикладі я використовую службу NLS для перекладу. Токени NLS оновлюються через http.

Сервіс:

app.factory('nlsService', ['$http', function($http) {
  var data = {
    get: {
      ressources        : "gdc.ressources",
      maintenance       : "gdc.mm.maintenance",
      prewarning        : "gdc.mobMaint.prewarning",
    }
  };
// ... asynchron change the data.get = ajaxResult.data... 
  return data;
}]);

Вираз контролера та області

app.controller('MenuCtrl', function($scope, nlsService)
  {
    $scope.NLS = nlsService;
  }
);

<div ng-controller="MenuCtrl">
  <span class="navPanelLiItemText">{{NLS.get.maintenance}}</span>
</div>

Вищезазначений код працює, але спочатку я хотів отримати безпосередній доступ до своїх токенів NLS (див. Наступний фрагмент), і тут значення не оновились.

app.controller('MenuCtrl', function($scope, nlsService)
  {
    $scope.NLS = nlsService.get;
  }
);

<div ng-controller="MenuCtrl">
  <span class="navPanelLiItemText">{{NLS.maintenance}}</span>
</div>