0

私はこれについて多くのことを検索して試しましたが、おそらく間違っていると思います。

私は非常によく似た DOM 部分を持つ単一ページ アプリを持っていますが、サービスからそれらに供給されるデータによってのみ区別されます。各 DOM ピースには、異なる Web サービスがあります。

私のHTMLは次のようになります

<div section="foo">
    <ul>
        <li ng-repeat="item in collection">{{item.name}}</li>
    </ul>
</div>
<div section="bar">
    <ul>
        <li ng-repeat="item in collection">{{item.cost}}</li>
    </ul>
</div>

私の実際の例では違いがより劇的なので、「コスト」を「名前」に変更して同一にすることはできません。

次のようなディレクティブがあります。

angular.module("App").directive("section", ["BaseProvider", function(provider) {
    return {
        restrict: "A",
        scope: {},
        link: function($scope, element, attrs) {
            provider.query(attrs.section).success(function(response) {
                $scope.collection = response; // ** pay attention to this line **
            });
        }
    };
}]);

そのため、BaseProvider の query メソッドを呼び出して、DOM 要素の section 属性を渡します。つまり、私の例では「foo」または「bar」です。

BaseProvider は次のようになります。

angular.module("App").factory("BaseProvider", ["$http", function($http) {
    var urls = {
        foo: "/something/foo.v1.json",
        bar: "/something/bar.v2.json"
    };

    return {
        query: function(base) {
            return $http.get(urls[base]);
        }
    };
}]);

これはすべて機能します。私が実行しているのは典型的なディレクティブの問題です- $apply/$digestサイクルに間に合わないため$scope.collection = response、ディレクティブ内で行うとコレクションは設定されますが、DOMは更新されません。

そのため、実行しようとし$scope.$apply()ましたが、$digest in progress エラーが発生しました。

http://docs.angularjs.org/error/$rootScope:inprog?p0=$digest

提案を試しましたが、まだ問題があります。私はこの時点でアイデアがありません。おそらく、再利用可能なディレクティブと、すべてを駆動する単一のプロバイダーを持つことを望んでいます。

私は FooCtrl と BarCtrl を使用してこれをすべて機能させましたが、何度も繰り返していたので、間違っていると感じました。

4

1 に答える 1

6

angular 1.2.x 以降を使用している場合、isolate スコープを使用しているため、ディレクティブは機能しません。スコープを分離すると、スコープに割り当てる変数は、スコープの内部テンプレート (template:属性を使用してディレクティブで定義されたテンプレートを意味します) 内からのみ使用できることを意味します。

ディレクティブにはテンプレートがないため、isolate スコープを使用しないでください。代わりに：

scope: {}

やったほうがいい：

scope: true

これにより、ディレクティブはスコープを作成しますが、分離しません。これにより、ディレクティブのスコープが外側のテンプレート (つまり、ng-repeat) で利用できるようになります。

ディレクティブでテンプレートが定義されていない場合は、isolate スコープをほとんど使用しないでください。

于 2014-01-03T06:15:22.087 に答える