在范围内访问时未定义的服务变量

Question

我正在尝试实现一个控制器，其范围变量由服务变量设置，如下所示：

$scope.sidebar= resourceService.sidebar;

变量侧边栏由启动时调用的函数设置：

var cb = function (api, data) {
for (var key in data) {
var logoArray = data[key];
service.sidebar[key] = logoArray.map(function (logo) {
logo.img = api + "/" + logo.img;
return logo;
});
}
}
service.requestOnStartup = function (api) {
var defer = $q.defer();
$http.get(config.ApiEndpoint.Base + api).success(function (data) {
if (angular.isObject(data)) {
defer.resolve(cb(api, data));
} else {
$log.error("[ResourceService] Unexpected data from resource backend");
defer.reject(data);
}
}).error(function (msg) {
$log.error("Invalid request");
defer.reject(msg);
});
return defer.promise;
};

当控件到达范围时，服务变量仍未解析，并且在解析时，对范围的控制将丢失。如何使用承诺来解决这个问题？

Answer 1

如果您直接显示$scope.sidebar，您的代码看起来不错。变量将异步填充，因此它将在片刻后出现。

如果在加载控制器时对其执行某些操作，则需要使用$watch

$scope.$watch('sidebar', function() {
if ($scope.sidebar) {...} // check for existence here
});

---

顺便说一句，您可以像这样简化requestOnStartup

service.requestOnStartup = function (api) {
return $http.get(config.ApiEndpoint.Base + api).then(function (data) {
if (angular.isObject(data)) {
return cb(api, data);
} else {
$log.error("[ResourceService] Unexpected data from resource backend");
return $q.reject(data);
}
}, function (msg) {
$log.error("Invalid request");
return $q.reject(msg);
});
};

Answer 2

你也可以使用angular js现有的$q服务：

service.requestOnStartup = function (api) {
return $q(function(resolve, reject){
$http.get(config.ApiEndpoint.Base + api).then(function (data) {
if (angular.isObject(data)) {
resolve(cb(api, data));
} else {
$log.error("[ResourceService] Unexpected data from resource backend");
reject(data);
}
}, function (msg) {
$log.error("Invalid request");
reject(msg);
});
});
};