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

& 在您的指令中创建一个函数，该函数 returns 表达式在针对父范围求值后的结果。

一个简单的解决方法是将您的模板更改为：

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

以及用法

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

Answer 2

为了在 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>

现在，当您在 subscribe 属性表达式中使用变量 sku 时，无论您在哪里使用该指令，它都将具有 productId 的值，这将起作用。

来自the docs的相关部分：

Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

Answer 3

如您所知，有 3 个 AngularJs 指令作用域方法：'@'、'='、'&'，但现在我们只讨论 '&' method.We去看看，我们如何在我们的应用程序中实现方法“&”。

当我们在当前范围内定义任何函数并希望将其实现到任何指令时，请记住一件事：您必须注意函数的参数及其 order.If 您想要更多，这里有一个很棒的有关的文章：

http://www.w3docs.com/snippets/angularjs/angularjs-directive-scope-method.html

AngularJS 指令将参数传递给独立作用域函数

AngularJS directive Passing parameters to isolated scope function

angularjs

angularjs-directive