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

我正在尝试编写一个指令来解决承诺并将数据添加到作用域，以便我可以懒惰地将数据从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'为了测试我的代码的默认值部分是否会工作;因为它保持在foo，所以即使默认值被放入profile。

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

添加一个$scope.$apply()会导致我得到rootcope更新已在进行中的错误。

有什么办法可以完成我想要做的事情吗？

来源

2014-09-19 Phil Barresi

我会解决这个问题。您可以轻松生成一个像ngResource一样自动解包的可容纳代码，而不是将其构建到指令中。

让我们考虑一个例子：你需要一个数组，你需要在线获取一个getArray()函数，该函数返回一个promise并发出一个http请求。

通常你：

getArray().then(function(result){ 
    $scope.data = result; 
});

我假设你想避免，因为它的很多写，如果一切都在你的范围内是这样的。用于使用和ngResource仍然角使用诀窍的承诺如下：

返回一个空的结果，这也是一个承诺
每当这个承诺解决，更新屏幕上的结果。

例如，我们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()和结果分配给一个作用域变量，只要承诺解决它会更新该值。

来源

2014-09-19 18:39:55

那么，我试图将它建立到指令的原因是因为我基本上有大量的位置，我想要根据关于该条目的特定特征来拉下相关数据;在这种情况下，我希望从仅具有公司ID的位置下载公司预览，而不要将该预览注入实际的原始数据。我会看看如果我能适应你所说的话，以更好地适应我的工作流程 – 2014-09-19 19:24:19

@PhilBarresi完全有可能自动化创建对象的过程并向他们添加对'then'的承诺 - 事实上Angular会自己做到这一点1.2之前的版本 – 2014-09-19 19:29:37

当它全部沉没后，我意识到这绝对是正确的方式来看待它;角度的方式是用数据处理数据，而不是通过滥用显示来解决问题。有人向我扔了这个优秀的蹦床，给出了另一个很好的示范，说明如何使用你的建议来实现这一点（http://plnkr.co/edit/H11igQf7OXmoQIRUEkLP?p=info）。 – 2014-09-20 11:32:53

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

回答

相关问题