1

在我的最高级别范围内，我从服务器获取一些数据以在整个页面中使用，如下所示$scope.lotsOfData = $http.get("lotsOfData");：所以现在我的范围拥有一个承诺对象lotsOfData。然后，在我的 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>

其中 source 和 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 对象的工作原理，所以也许我只需要知道如何获得所需的属性。

我希望我在这里尝试完成的工作是有意义的，有人可以为我指明正确的方向，以了解如何完成这项工作。谢谢。

4

2 回答 2

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

这应该可以解决问题，您只需注意数据的更改并currObj使用新值设置。

于 2012-08-09T17:23:27.010 回答
0

我就是这样完成了我想要的。我为上述指令创建了一个外部指令，然后为绑定到我想要的数据的内部指令创建了一个隔离范围。

所以我的外部指令 HTML 看起来像这样：

<div>
    <data-subset curr-obj="lotsOfData.foo.blah[source].bar[id]"></data-subset>
</div>

javascript看起来像这样：

myModule.directive('outer-data', function() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'outerData.html',
            link: function(scope, element, attrs) {
                scope.id = attrs.id;
                scope.source = attrs.source;
            },
            scope: true
        }
    });

然后我的 dataSubset 的 javscript 如下所示：

myModule.directive('dataSubset', function() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'dataSubset.htm',
            scope: {
                currObj: '='
            }
        }
    });

那么在我的顶级 HTML 文件中，我有这样的内容：

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

我可以像我想要的那样在我的 dataSubset 上引用 currObj。

于 2012-08-09T19:08:39.210 回答