angular-translate 的链接承诺
Chaining promises for angular-translate
作为 Angular 的新手,我正在为使用 angular-translate 的特殊 promise 设置而苦苦挣扎。
我有一个用于 angular-translate 的工作 CustomLoader,它工作正常。但是我必须调用 CustomLoader 两次(使用 $translate.refresh() )并且根据外部条件,CustomLoader 应该加载固定的数据预设或相同的预设但与外部后端调用的结果合并.
这是我目前得到的:
(function () {
'use strict';
/**
* TranslationCustomLoader
*/
angular
.module('myApp')
.factory('TranslationCustomLoader', TranslationCustomLoader);
function TranslationCustomLoader($q, ENV, $http, ExternalService) {
return function (options) {
var translations_en = {
MYKEY1: 'Value1',
MYKEY2: 'Value2',
MYKEY3: 'Value3'
};
var translations_de = {
MYKEY1: 'Wert1',
MYKEY2: 'Wert2',
MYKEY3: 'Wert3'
};
var deferred = $q.defer(), translations;
// Standard Dataset for Translations based on options.key (= language key)
if (options.key === 'en') {
translations = translations_en;
} else {
translations = translations_de;
}
// If some condition is met call external backend and retrieve additional data
if (ExternalService.isCondition()) {
$http({
method: 'GET',
params: {
lang: options.key
},
url: ENV.apiEndpoint + 'api/v1/translations'
}).success(function (data) {
// Now replace/add data in variable 'translations' by external result
// External result could be: [MYKEY2: 'AnotherValue', MYKEY4: 'AdditionalValue']
angular.forEach(data, function (value, key) {
translations[key] = value;
});
// Return 'merged' promise
deferred.resolve(translations);
return deferred.promise;
})
} else {
// Return 'standard' promise
deferred.resolve(translations);
return deferred.promise;
}
}}})();
CustomLoader 被调用,
如果外部条件为假,则返回标准承诺并由 $translate 成功解决。
如果外部条件为真,我可以看到调用了外部后端,我什至看到了结果,但我得到了一个 'cannot read .then of undefined',因为承诺似乎不正确。
谁能帮我解决这个问题?我已经尝试了很多(包括一些绝望的 $q.all、.when 等)。
不幸的是,使用部分加载程序(由 angular-translate 提供)不是替代方案。
当 isCondition()
为真时,您的函数不会返回任何内容。
您还使用了 success(),它已被弃用,并且不允许链接承诺。
如果 http 调用失败,您永远不会拒绝您的承诺。这又是通过使用链接自动解决的。
代码应该看起来像
function (options) {
var translations_en = {
MYKEY1: 'Value1',
MYKEY2: 'Value2',
MYKEY3: 'Value3'
};
var translations_de = {
MYKEY1: 'Wert1',
MYKEY2: 'Wert2',
MYKEY3: 'Wert3'
};
var translations;
// Standard Dataset for Translations based on options.key (= language key)
if (options.key === 'en') {
translations = translations_en;
} else {
translations = translations_de;
}
// If some condition is met call external backend and retrieve additional data
if (ExternalService.isCondition()) {
return $http({
method: 'GET',
params: {
lang: options.key
},
url: ENV.apiEndpoint + 'api/v1/translations'
}).then(function (response) {
// Now replace/add data in variable 'translations' by external result
// External result could be: [MYKEY2: 'AnotherValue', MYKEY4: 'AdditionalValue']
angular.forEach(response.data, function (value, key) {
translations[key] = value;
});
// Return 'merged' promise
return translations;
});
} else {
return $q.when(translations);
}
}
作为 Angular 的新手,我正在为使用 angular-translate 的特殊 promise 设置而苦苦挣扎。
我有一个用于 angular-translate 的工作 CustomLoader,它工作正常。但是我必须调用 CustomLoader 两次(使用 $translate.refresh() )并且根据外部条件,CustomLoader 应该加载固定的数据预设或相同的预设但与外部后端调用的结果合并.
这是我目前得到的:
(function () {
'use strict';
/**
* TranslationCustomLoader
*/
angular
.module('myApp')
.factory('TranslationCustomLoader', TranslationCustomLoader);
function TranslationCustomLoader($q, ENV, $http, ExternalService) {
return function (options) {
var translations_en = {
MYKEY1: 'Value1',
MYKEY2: 'Value2',
MYKEY3: 'Value3'
};
var translations_de = {
MYKEY1: 'Wert1',
MYKEY2: 'Wert2',
MYKEY3: 'Wert3'
};
var deferred = $q.defer(), translations;
// Standard Dataset for Translations based on options.key (= language key)
if (options.key === 'en') {
translations = translations_en;
} else {
translations = translations_de;
}
// If some condition is met call external backend and retrieve additional data
if (ExternalService.isCondition()) {
$http({
method: 'GET',
params: {
lang: options.key
},
url: ENV.apiEndpoint + 'api/v1/translations'
}).success(function (data) {
// Now replace/add data in variable 'translations' by external result
// External result could be: [MYKEY2: 'AnotherValue', MYKEY4: 'AdditionalValue']
angular.forEach(data, function (value, key) {
translations[key] = value;
});
// Return 'merged' promise
deferred.resolve(translations);
return deferred.promise;
})
} else {
// Return 'standard' promise
deferred.resolve(translations);
return deferred.promise;
}
}}})();
CustomLoader 被调用,
如果外部条件为假,则返回标准承诺并由 $translate 成功解决。
如果外部条件为真,我可以看到调用了外部后端,我什至看到了结果,但我得到了一个 'cannot read .then of undefined',因为承诺似乎不正确。
谁能帮我解决这个问题?我已经尝试了很多(包括一些绝望的 $q.all、.when 等)。
不幸的是,使用部分加载程序(由 angular-translate 提供)不是替代方案。
当 isCondition()
为真时,您的函数不会返回任何内容。
您还使用了 success(),它已被弃用,并且不允许链接承诺。
如果 http 调用失败,您永远不会拒绝您的承诺。这又是通过使用链接自动解决的。
代码应该看起来像
function (options) {
var translations_en = {
MYKEY1: 'Value1',
MYKEY2: 'Value2',
MYKEY3: 'Value3'
};
var translations_de = {
MYKEY1: 'Wert1',
MYKEY2: 'Wert2',
MYKEY3: 'Wert3'
};
var translations;
// Standard Dataset for Translations based on options.key (= language key)
if (options.key === 'en') {
translations = translations_en;
} else {
translations = translations_de;
}
// If some condition is met call external backend and retrieve additional data
if (ExternalService.isCondition()) {
return $http({
method: 'GET',
params: {
lang: options.key
},
url: ENV.apiEndpoint + 'api/v1/translations'
}).then(function (response) {
// Now replace/add data in variable 'translations' by external result
// External result could be: [MYKEY2: 'AnotherValue', MYKEY4: 'AdditionalValue']
angular.forEach(response.data, function (value, key) {
translations[key] = value;
});
// Return 'merged' promise
return translations;
});
} else {
return $q.when(translations);
}
}