0

さて、時々引き起こされている私の最初の問題について説明しましょう。次の product.html ページを検討してください。

<div data-ng-controller="productsCtrl" data-ng-init="getProducts()" class="row-fluid">
    <div class="span12">
        <div data-ng-repeat="section in sections">
            <h2>{{section.name}}</h2>
            <div class="products-container">
                <div data-ng-repeat="product in section.products">
                    <img alt="{{product.name}}" class="product-img" data-zoomable-image="/path_to_large_img_or_empty_if_no_image_to_zoom" data-ng-src="/path_to_thumbnail_img">
                    <div class="product">
                        <!-- Product Info -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

productsCtrl コントローラーは明らかに製品情報を取得する役割を果たします。そのうちの 1 つは、製品のサムネイル/大きな画像の URL です。アイデアは、特定の画像の「data-zoomable」属性に基づいて img 要素を制御するディレクティブを作成することです。属性の値が空の場合、表示される画像はありません。それ以外の場合は、モーダル ボックスを開いて画像を表示する必要があります。

ここまでは順調ですね。それでは、zoomableImage ディレクティブを示しましょう。

app.directive('zoomableImage', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var zoomIn = element.wrap('<a href="#" class="zoom-in"></a>').click(function (e) {
                var href = element.data('zoomableImage');

                var modal = $('#zoomInModal');

                //Here, I need to pass the "product's name" to the zoomInCtrl's scope.
                //This can be done using the following 3 lines of code...

                var s = modal.scope();
                s.product = 'The clicked element\'s name obtained from the DOM "element"';
                s.$apply();

                //I believe that those 3 above lines suck, since I'm not supposed to
                //set the scope of another controller in a directive. Right?

                modal.prependTo('body').modal('show');
                e.preventDefault();
            });

            $('<span class="label label-info">Zoom In</span>').insertAfter(zoomIn);
        }
    };
});

問題は、「クリックされた」製品の名前、部品番号、および画像の URL を、上で開くダイアログに渡す正しい方法は何かということです。ProductsCtrl はセクションの配列を返し、各セクションには複数の製品が含まれていることに注意してください...

もちろん、名前、部品番号、およびその他の関連情報を img 要素のさまざまなデータ属性に入れることができますが、これは製品コントローラーに既に存在する情報と重複していると思います。

ありがとう。

4

1 に答える 1

0

これをディレクティブに追加することで、製品オブジェクトの参照をディレクティブに渡すことができます。

scope: {
    product: '='
}

その後、オブジェクトはコントローラーとディレクティブ インスタンスの間で共有されます。html にも属性を追加する必要があります。

<img data-product="product" data-zoomable-image="..." ... >

EDIT：モーダルはサービスでなければなりません。angular-bootstrap modal をチェックアウトします。

于 2013-10-06T07:37:51.223 に答える