57

私はAngularJSこれまでのところ初めてで、気に入っています。ドキュメントが見つからない問題の1つは、次のとおりです。

繰り返しHTMLを含むページ、すべて同じhtmlテンプレートを持つサブカテゴリを含むカテゴリページがあります。私が現在行っているのは、1つのコントローラーですべてのJsonを一度にロードすることです。これは少し遅いです。サブビュー（ASP.NET MVCのパーシャルのようなもの）に分割したいのですが、各ビューは、初期化時にサービスへの独自の呼び出しを行います。カテゴリ名もパラメータとして渡したいのですが。

それを行う最も効率的な方法は何ですか？ディレクティブも試してみましたが、呼び出しごとにスコープを分けておくことができません。詳細が必要な場合はお知らせください。

4

1 に答える 1

67

私はついにこれを解決することができました。ドキュメントを読んで遊んだ後はとても簡単です

ディレクティブは次のとおりです。

angular.module('components', []).directive('category', function () {
return {
    restrict: 'E',
    scope: {},
    templateUrl: '/Scripts/app/partials/CategoryComponent.html',
    controller: function ($scope, $http, $attrs) {
        $http({
            url: "api/FeaturedProducts/" + $attrs.catName,
            method: "get"
        }).success(function (data, status, headers, config) {
            $scope.Cat = data;
        }).error(function (data, status, headers, config) {
            $scope.data = data;
            $scope.status = status;
        });

    }
}
});

これは、同じコンポーネントが複数回呼び出されているがパラメータが異なるメインページです

    <ul class="unstyled">
    <li>
    <category cat-name="Ultrabooks"></category>
    </li>
    <li>
    <category cat-name="Tablets"></category>
    </li>
    <li>
    <category cat-name="Laptops"></category>
    </li>
    <li>
    <category cat-name="Digital SLR Cameras"></category>
    </li>

CategoryComponent.html

<a href="#/Categories/{{Cat.CategoryName}}">
    <h4>{{Cat.CategoryName}}</h4>
</a>
<div ng-switch on="status">
    <div ng-switch-when="500" class="alert alert-error">
        {{status}}
        {{data}}
    </div>
    <div ng-switch-default>
        <ul class="unstyled columns">
            <li class="pin" ng-repeat="p in Cat.Products">
                <a href="#/reviews/{{p.UPC}}">
                    <h5>{{p.ProductName}}</h5>
                    <img src="{{p.ImageUrl}}">
                </a>
            </li>
        </ul>
    </div>
</div>
于 2012-12-01T18:44:07.127 に答える