javascript - AngularJS-为范围内的对象添加快捷方式

在最高级别的范围内，我从服务器中获取了一些数据，以供整个页面使用，例如：$scope.lotsOfData = $http.get("lotsOfData");。因此，现在我的作用域为lotsOfData保存了一个promise对象。然后，在我的HTML中，我的指令仅与一小部分lotsOfData对象有关。一个这样的指令可能看起来像这样：

<div>
    {{lotsOfData.foo.blah[source].bar[id].someData}}<br>
    {{lotsOfData.foo.blah[source].bar[id].otherData}}<br>
    {{lotsOfData.foo.blah[source].bar[id].differentData}}
</div>

通过指令的属性设置源和ID的位置。我的HTML页面如下所示：

<data-subset source="1" id="1" />
<data-subset source="1" id="2" />
<data-subset source="2" id="1" />
<data-subset source="3" id="1" />

我讨厌在整个指令中重复lotsOfData.foo.blah[source].bar[id]。有什么方法可以在范围中进行设置，以便我的指令看起来更像这样？

<div>
    {{currObj.someData}}<br>
    {{currObj.otherData}}<br>
    {{currObj.differentData}}
</div>

这不仅会清理HTML，而且如果我们重新构造lotsOfData对象，那么只有一个地方可以更改它获取currObj对象的方式。在我指令的链接函数中，我尝试了以下操作：

link: function(scope, element, attrs) {
    scope.currObj = scope.lotsOfData.foo.blah[attrs.source].bar[attrs.id];
}

但是，由于lotsOfData是Promise对象，因此它没有名为foo的属性。我对promise对象的工作方式并不了解很多，所以也许我只需要知道如何获取所需的属性即可。

我希望我在这里要完成的工作是有意义的，并且有人可以为我指出如何完成这项工作的正确方向。谢谢。

最佳答案

link: function(scope, element, attrs) {
    scope.$watch('lotsOfData.foo.blah['+attrs.source+'].bar['+attrs.id+']', function(newVal, oldVal) {
        scope.currObj = newVal;
    }
}

这应该可以解决问题，您只需监视数据上的更改，然后将currObj设置为新值。