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

发布时间：2020-12-17 17:13:46 所属栏目：安全来源：网络整理

导读：我正在尝试编写一个指令来解析promise并将数据添加到作用域中,这样我就可以懒惰地将数据加载到API中的子元素中. 通过console.logging我确信我正在解析承诺并获得我期望的数据,但页面上没有任何更新.我假设从指令内部动态添加到范围导致我的问题. 该指令似乎

我正在尝试编写一个指令来解析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解析,它将更新该值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!