AngularJS SET在控制器服務變量，並使用其他地方沒有$把它看

這是我的基本服務來設置和獲取價值：

.service('companyService', [ function() { 
    var self = this 
    self.options = {} 
    function CompanyService() { 
    self.setOptions = function (newObj) { 
    self.options = newObj 
    } 
    } 
    return CompanyService() 
}])

在全球控制器我打電話給我的$ API廠，這使得一個http請求（有承諾）來獲取和設置公司選項。我只做一次。

.controller('global', ['$scope', '$http', '$api', '$location', '$translate', '$rootScope', '$timeout', '$filter', 'toastr', '$window', 'flag', 'companyService', function ($scope, $http, $api, $location, $translate, $rootScope, $timeout, $filter, toastr, $window, flag, companyService) { 
$api('GetCompanyOptions', {}) 
    .then(function (response) { 
     $scope.companyOptions = response.data 
     // doing stuff with the response first 
     // ... 
     // and setting the value to companyService 
     companyService.setOptions($scope.companyOptions) 
    }) 
}])

現在幾乎在每個控制器和指令中我都想使用這個值。但由於HTTP調用需要一段時間，我有很多與時機的問題，所以有時我得到空值與以下幾點：（是的，裏面的html它會自動使用$應用和變量不爲空，但控制器內它是）

$scope.companyOptions = companyService.options

我想除了使用$表中每個控制器和指導，我得到的價值了許多解決方案，例如使用$手錶，$超時，承諾，$ rootScope等，但沒有工作：

$scope.$watch(function() { return companyService.options }, function (newVal) { 
    // checking if companyService.options is still empty or not 
    if (!$.isEmptyObject(newVal)) { 
    // Now the options is filled, do some stuff... 
    } 
})

所以我的問題是：

在每個控制器使用$腕錶工作。但有點混亂，有什麼辦法擺脫它們？
而是在每一個控制器/指令使用$手錶，我可以用它一旦裏面的服務？
是否更有意義撥打服務裏面的http請求，如果「選擇」是空的？所以我可以使用諾言？（但我不喜歡這個選項，因爲其他功能，我更喜歡在全局控制器中獲取/設置公司選項）

來源

2017-08-28 tahaerden

嘗試了很多解決方案之後，我決定採用以下最適合我的方案。我希望它對其他人有用。

我決定持有公司ngStorage（https://github.com/gsklee/ngStorage）選項，而不是服務。

所以這樣的：

companyService.setOptions($scope.companyOptions)

更改爲此：

$scope.$storage.companyOptions = $scope.companyOptions

然後我用一個全局路由的決心與下面的代碼的幫助，所以，這一段代碼將「前」工作實際路由發生。（工廠被稱爲checkToken因爲我也做一個HTTP請求在這裏檢查，如果用戶令牌是有效的）：

Routes.config(['$routeProvider', function ($routeProvider) { 
    var originalWhen = $routeProvider.when 
    $routeProvider.when = function (path, route) { 
    route.resolve || (route.resolve = {}) 
    angular.extend(route.resolve, { 
     checkToken: ['$checkToken', function ($checkToken) { 
     return $checkToken.checkToken() 
     }] 
    }) 
    return originalWhen.call($routeProvider, path, route) 
    } 
}])

這是工廠本身，我也觀看被設置好的了companyOptions。而到了頁面的路線時，它已準備就緒：

.factory('$checkToken', ['$q', '$timeout', '$location', '$api', '$rootScope', '$localStorage', function ($q, $timeout, $location, $api, $rootScope, $localStorage) { 
    return { 
    checkToken: function() { 
     var deferred = $q.defer() 
     $api('IsTokenValid', {}) 
     .then(function (response) { 
      // some unrelated codes here... 
      // watching companyoptions in localStorage 
      $rootScope.$watch(function() { return $localStorage.companyOptions }, function (newVal) { 
      if (!$.isEmptyObject(newVal)) { 
       // now that we have companyOptions, resolve and go to page 
       deferred.resolve('go to page!') 
      } 
      }, true) 
     }) 
     return deferred.promise 
    } 
    } 
}])

最後由於該解決方案，在我的控制器，這樣的：

$scope.$watch(function() { return companyService.options }, function (newVal) { 
    // checking if companyService.options is still empty or not 
    if (!$.isEmptyObject(newVal)) { 
    // Now the options is filled, do some stuff... 
    } 
})

成了這一點，我擺脫了companyService廠：

$scope.companyOptions = $scope.$storage.companyOptions

來源

2017-10-31 09:52:02 tahaerden

AngularJS SET在控制器服務變量，並使用其他地方沒有$把它看

回答

相關問題