Question

在我的最高级别范围内，我从服务器获取一些数据，以便在整个页面中使用，如下所示：$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对象是如何工作的，所以也许我只需要知道如何获得我需要的属性。

我希望我在这里想要完成的事情是有道理的，有人可以指出我如何使这项工作朝着正确的方向发展。感谢。

Answer 1

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

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

Answer 2

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

所以我的外部指令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。

AngularJS - 在范围中添加对象的快捷方式

2 个答案: