Question

我正在尝试编写一个指令来解析promises并将数据添加到作用域中，这样我就可以懒惰地将数据加载到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，甚至默认值都不会放入profile。

其次，在承诺解决后，我应该将profile设置为数据，但页面不会更新。

添加$scope.$apply()会导致我发现rootcope update已在进行中错误。

有没有办法完成我想做的事情？

Answer 1

我会以不同的方式解决这个问题。而不是将其构建为指令，您可以轻松地生成一个自动解包，就像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解析，它就会更新该值。

如何将父元素的指令中的数据传递给子元素？

1 个答案: