AngularJS - 如何在多個控制器中共享監視對象？

Question

我現在的控制器都充滿了隱藏的提交按鈕邏輯，並經過後端獲取的數據顯示成功消息：

angular.module('testApp').controller('TestCtrl', ['$scope', 'testService', 
    function ($scope, testService) { 

    $scope.loading = false; 
    $scope.updated = false; 
    $scope.error = false; 

    $scope.submit = function() { 
     if(!$scope.form.$valid) { 
     return; 
     } 

     $scope.loading = true; 
     testService.doBackendUpdate({some:'data'}) 
     .success(function() { 
      $scope.error = $scope.loading = false; 
      $scope.updated = true; 
     }) 
     .error(function(error) { 
      $scope.updated = $scope.loading = false; 
      $scope.error = true; 
     }); 
    }; 
    }]); 

和HTML：

<alert type="'success'" close="updated = false" ng-show="updated">Data Updated!</alert> 

<button ng-hide="loading">update</button> 

什麼，我想有這些，而不是變量是某種對象，並再次使用 其他控制：

angular.module('testApp').controller('TestCtrl', ['$scope', 'testService', 
    function ($scope, testService) { 

    $scope.status = new ActionStatus(); 

    $scope.submit = function() { 
     if(!$scope.form.$valid) { 
     return; 
     } 

     $scope.status.loading(); 
     testService.doBackendUpdate({some:'data'}) 
     .success(function() { 
      $scope.status.succes(); 
     }) 
     .error(function(error) { 
      $scope.status.error(); 
     }); 
    }; 
    }]); 

和HTML：

<alert type="'success'" close="updated = false" ng-show="status.isUpdated">Data Updated!</alert> 

<button ng-hide="statuss.isLoading">update</button> 

但我怎麼能做到這一點？ AngularJS手錶在觀察變量時丟失了上下文，所以我不能通過原型創建一個ActionStatus對象。

任何想法？

Answer 1

有三種方式我能想到的：

1. 把它放進$rootScope。
2. 將其放入服務/工廠，並使用消息系統（$broadcast,$emit,$on）相互通信。

3. 到第二個選項類似，只是objectEquality集觀看的維修服務爲true，像這樣：

   $watch(WhateverService.get(), functiondoTheJob(){...}, true) 
   

Answer 2

到幾個控制器之間共享的對象，你應該創建一個服務。

例子：

// Custom object 
function ActionStatus() { 
    this.isLoading = false; 
    this.updated = false; 
    this.error = false; 
    this.loading = function() {}; 

} 

angular.module('testApp').service('actionStatus', [ActionStatus]); 

// Inject object factory dependency to your controller. 
angular.module('testApp').controller('TestCtrl', ['$scope', 'testService', 'actionStatus', 
function ($scope, testService, actionStatus) { 

$scope.status = actionStatus; 

}]); 

這裏的問題是，服務是單身，並與new關鍵字進行實例化。

要共享對象原型並自己處理實例，可以使用工廠方法。工廠應退回原型的構造是這樣的：

app.factory('actionStatus', [function() { 

// Define constructor 
function ActionStatus() { 
    this.isLoading = false; 
    this.updated = false; 
    this.error = false; 
    this.loading = function() {}; 
    this.stopLoading = function() { 
    this.isLoading = false; 
    }; 
} 

// Return constructor to handle the instantiation yourself. 
return ActionStatus; 
}]); 

我創建了plnkr工作示例給你：http://plnkr.co/edit/Wd4kmg?p=preview

更多信息是：

http://code.angularjs.org/1.2.14/docs/guide/providers