我正在尝试编写一个指令来解析promise并将数据添加到作用域中,这样我就可以懒惰地将数据加载到API中的子元素中.
通过console.logging我确信我正在解析承诺并获得我期望的数据,但页面上没有任何更新.我假设从指令内部动态添加到范围导致我的问题.
该指令似乎相当微不足道,我知道这个承诺正在得到解决：
app.directive('resolver',() => {
return {
restrict: "AEC",scope: {
outName: "@",promise: "&",defaultVal: "="
},link: function ($scope,element,attrs) {
var promise = $scope.promise,outName = $scope.outName || 'myPromise',defaultVal = $scope.defaultVal || {};
$scope[outName] = defaultVal;
promise().then(data => {
$scope[outName] = data;
});
}
}
});
我希望这会让我做类似以下的事情：
<li class="company-entry" ng-repeat="company in currentFeed.companies" resolver promise="getPreview(company.companyId)" out-name="profile" default-val="{name:'Loading...',description:'',images:[],sources:[]}"> ... <a ui-sref="company.Feed({ id: company.companyId })" class="company-name">{{ profile.name || 'foo' }}</a> </li>
首先,我有profile.name || ‘foo’是为了测试我的代码的default-val部分是否有效;因为它保持在foo,甚至默认值都不会放入配置文件中.
其次,在承诺解决后,我应该为数据设置配置文件,但页面不更新.
添加$scope.$apply()使我得到rootcope更新已经在进行中的错误.
有没有办法完成我想做的事情？
解决方法
我会以不同的方式解决这个而不是将其构建为指令,您可以轻松地生成一个自动解包,就像ngResource一样.
让我们考虑一个例子：你有一个数组,你需要使用getArray()函数在线获取,该函数返回一个promise并发出一个http请求.
通常你这样做：
getArray().then(function(result){
$scope.data = result;
});
我假设你试图避免这种情况,因为如果你的范围内的所有内容都是这样的,那么编写的内容就很多了.过去使用的技巧承诺和ngResource仍在Angular中使用如下：
>返回一个空结果,这也是一个承诺
>每当该承诺结算时,请在屏幕上更新结果.
例如,我们的getArray()看起来像：
function getArray(){
var request = $http(...); // actual API request
var result = []
result.then = request.then; // make the result a promise too
result.then(function(resp){
// update _the same_ object,since objects are passed by reference
// this will also update every place we've send the object to
resp.data.forEach(function(el){ result.push(el); });
});
return result;
}
现在,如果调用getArray()并将结果分配给范围变量,则只要promise解析,它将更新该值.
