0

Well, let me describe my original problem that's being aroused time to time. Consider the following product.html page:

<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>

The productsCtrl controller is obviously responsible to get the products information, one of which is the thumbnail / large image url of the product. The idea is to create a directive that controls the img element based on "data-zoomable" attribute on a given image. If the attribute's value is empty, there's no image to be displayed; Otherwise, a modal box should be opened to display the image.

So far, so good. So let me show the zoomableImage directive:

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);
        }
    };
});

So, the question is that what's the correct way of passing the "clicked" product's Name, Part#, and Image URL to the dialog I'm going to open above? Please note that the ProductsCtrl returns an array of section, each section contains multiple products and so on...

Of course, I can put the name, part# and other related information in different data attributes of the img element, but I do believe this duplicates the information that's already there in the products controller.

Thanks.

4

1 回答 1

0

您可以通过将其添加到指令中来将产品对象的引用传递给指令：

scope: {
    product: '='
}

然后在您的控制器和指令实例之间共享该对象。您还必须在 html 中添加该属性：

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

编辑：模态应该是一项服务。检查angular-bootstrap modal。

于 2013-10-06T07:37:51.223 回答