AngularJS指令将参数传递给隔离范围函数

Question

我写了一个指令,为每个传递给指令的产品显示一个按钮.subscribe单击按钮时,也应将产品传递给指令的功能.

我遇到的问题是该参数未传递给该函数.

指令

directives.directive('subscriptionItem', function () {
    return {
        scope: {
            // Two way binding, = is equivalent to '=activeSubscription'
            activeSubscription: '=',
            products: '=',
            googleLogin: '&',
            subscribe: '&'
        },
        restrict: 'E',
        replace: 'true',
        templateUrl: 'common/directives/subscription-item.tpl.html'
    };
});

模板

<div>
    <ion-item class="item-text-wrap">
        <h2>{{activeSubscription.status}} - {{activeSubscription.action}}</h2>

        <p>{{activeSubscription.description}}</p>
    </ion-item>
    <ion-item ng-repeat="product in products" class="item-text-wrap" ng-if="activeSubscription.action === 'PAID'">
        <h2>{{product.title | limitTo: product.title.length - 21}}</h2>

        <p>{{product.description}}</p>
        <button class="button button-block button-positive" ng-click="subscribe(product.productId)">
            Buy for {{product.price}} - {{product.productId}}
        </button>
    </ion-item>
</div>

该product.productId显示正常,但不能传递给函数.

指令用法

<subscription-item active-subscription="activeSubscription" products="products" google-login="googleLogin()" subscribe="subscribe(sku)"></subscription-item>

父控制器范围中的订阅功能

$scope.subscribe = function (sku) {
    console.log('subscribe ' + sku)
    InAppBillingService.subscribe(sku)
        .then(function () {
            console.log('Success');
        })
        .catch(function (error) {
            $cordovaToast.showLongBottom(error);
        });
}

Answer 1

为了将make数据作为变量传递给subscribe属性引用的表达式,在您的情况下subscribe(sku),您需要在调用指令内的函数时提供"locals map":

    <button class="button button-block button-positive" ng-click="subscribe({sku: product.productId})">
        Buy for {{product.price}} - {{product.productId}}
    </button>

现在,当您sku在subscribe使用该指令的任何位置获得变量时,它将具有productId的值,然后该值将起作用.

文档中的相关部分:

通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是increment(amount),那么我们可以通过将localFn称为localFn({amount:22})来指定金额值.