Cập nhật giá trị phạm vi khi dữ liệu dịch vụ được thay đổi

Tôi có dịch vụ sau trong ứng dụng của mình:

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;
});

Sau đó, tôi sử dụng nó trong một bộ điều khiển như thế này:

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;
        });
    }
);

Vì vậy, về cơ bản dịch vụ của tôi cập nhật factory.taskList5 giây một lần và tôi đã liên kết điều này factory.taskListvới $scope.taskList. Sau đó, tôi đã thử các phương pháp khác nhau như $apply, $digestnhưng các thay đổi trên factory.taskListkhông được phản ánh trong bộ điều khiển và chế độ xem của tôi $scope.taskList.

Nó vẫn trống trong mẫu của tôi. Bạn có biết tôi có thể tuyên truyền những thay đổi này như thế nào không?

Mặc dù sử dụng $watchcó thể giải quyết được vấn đề, nhưng nó không phải là giải pháp hiệu quả nhất. Bạn có thể muốn thay đổi cách bạn đang lưu trữ dữ liệu trong dịch vụ.

Vấn đề là bạn đang thay thế vị trí bộ nhớ mà bạn taskListliên kết với mỗi khi bạn gán cho nó một giá trị mới trong khi phạm vi bị kẹt khi trỏ đến vị trí cũ. Bạn có thể thấy điều này xảy ra trong plunk này .

Chụp nhanh heap bằng Chrome khi bạn tải plunk lần đầu tiên và sau khi nhấp vào nút, bạn sẽ thấy rằng vị trí bộ nhớ mà phạm vi trỏ đến không bao giờ được cập nhật trong khi danh sách trỏ đến một vị trí bộ nhớ khác.

Bạn có thể dễ dàng sửa lỗi này bằng cách yêu cầu dịch vụ của bạn giữ một đối tượng có chứa biến có thể thay đổi (đại loại như data:{task:[], x:[], z:[]}). Trong trường hợp này, "dữ liệu" không bao giờ được thay đổi nhưng bất kỳ thành viên nào của nó cũng có thể được thay đổi bất cứ khi nào bạn cần. Sau đó, bạn chuyển biến dữ liệu này cho phạm vi và miễn là bạn không ghi đè nó bằng cách cố gắng gán "dữ liệu" cho một thứ khác, bất cứ khi nào một trường bên trong dữ liệu thay đổi, phạm vi sẽ biết về nó và sẽ cập nhật chính xác.

Phần mềm này hiển thị cùng một ví dụ đang chạy bằng cách sử dụng bản sửa lỗi được đề xuất ở trên. Không cần sử dụng bất kỳ trình theo dõi nào trong tình huống này và nếu có điều gì đó không được cập nhật trên chế độ xem, bạn biết rằng tất cả những gì bạn cần làm là chạy một phạm vi $applyđể cập nhật chế độ xem.

Bằng cách này, bạn loại bỏ sự cần thiết của những người theo dõi thường xuyên so sánh các biến để thay đổi và thiết lập xấu liên quan đến các trường hợp khi bạn cần theo dõi nhiều biến. Vấn đề duy nhất với phương pháp này là trên chế độ xem của bạn (html), bạn sẽ có "dữ liệu". tiền tố mọi thứ mà bạn đã từng chỉ có tên biến.

Angular (không giống như Ember và một số khung công tác khác), không cung cấp các đối tượng được bao bọc đặc biệt mà vẫn đồng bộ một cách bán kỳ diệu . Các đối tượng bạn đang thao tác là các đối tượng javascript thuần túy và giống như nói var a = b;không liên kết các biến avà b, nói $scope.taskList = uaProgressService.taskListkhông liên kết hai giá trị đó.

Đối với loại link-ing này, angularcung cấp $watchtrên$scope . Bạn có thể xem giá trị của uaProgressService.taskListvà cập nhật giá trị $scopekhi nó thay đổi:

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

Biểu thức đầu tiên được truyền cho $watchhàm được thực thi trên mọi $digestvòng lặp và đối số thứ hai là hàm được gọi với giá trị mới và cũ.

Tôi không chắc liệu điều đó có hữu ích không nhưng những gì tôi đang làm là liên kết hàm với $ scope.value. Ví dụ

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;
      };
  }]);

Sau đó, tôi chỉ liên kết nó trong DOM dưới dạng

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

Bằng cách này, bạn có thể tránh sử dụng $ watch trong mã của mình.

Không $watchhoặc vv là bắt buộc. Bạn chỉ cần xác định những điều sau

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;
    };
  });

Bởi vì hàm getTaskListthuộc $scopevề giá trị trả về của nó sẽ được đánh giá (và cập nhật) trên mọi thay đổi củauaProgressService.taskList

Thay thế nhẹ là trong quá trình khởi tạo bộ điều khiển, bạn đăng ký một mẫu trình thông báo được thiết lập trong dịch vụ.

Cái gì đó như:

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

Và dịch vụ có những thứ như:

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();
        }
    );
}]);

Điều này có thể cho phép bạn tinh chỉnh cẩn thận hơn khi bộ điều khiển của bạn làm mới từ một dịch vụ.

Giống như Gabriel Piacenti đã nói, không cần đồng hồ nếu bạn bọc dữ liệu thay đổi vào một đối tượng.

NHƯNG để cập nhật dữ liệu dịch vụ đã thay đổi trong phạm vi một cách chính xác, điều quan trọng là giá trị phạm vi của bộ điều khiển sử dụng dữ liệu dịch vụ không trỏ trực tiếp đến (trường) dữ liệu thay đổi. Thay vào đó, giá trị phạm vi phải trỏ đến đối tượng bao bọc dữ liệu đang thay đổi.

Đoạn mã sau sẽ giải thích điều này rõ ràng hơn. Trong ví dụ của tôi, tôi sử dụng Dịch vụ NLS để dịch. Các Token NLS đang được cập nhật qua http.

Dịch vụ:

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;
}]);

Bộ điều khiển và biểu thức phạm vi

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

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

Đoạn mã trên hoạt động, nhưng trước tiên tôi muốn truy cập trực tiếp Mã thông báo NLS của mình (xem đoạn mã sau) và ở đây các giá trị không được cập nhật.

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

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