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在控制器服务变量，并使用其他地方没有$把它看

回答

相关问题