1

私の最高レベルのスコープでは、次のようにページ全体で使用するためにサーバーからいくつかのデータをフェッチします$scope.lotsOfData = $http.get("lotsOfData");。これで、私のスコープは の promise オブジェクトを保持しますlotsOfData。次に、私の HTML には、lotsOfDataオブジェクトの小さなセットのみに関係するディレクティブがあります。そのようなディレクティブの 1 つは次のようになります。

<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れるだけでなく、そのオブジェクトを再構築する場合、オブジェクトの取得方法を変更する場所は 1 つだけになり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 の JavaScript は次のようになります。

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 に答える