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的值，然后该值将起作用。

the docs的相关部分：

通常需要通过以下方式从隔离范围传递数据表达式到父作用域，这可以通过传递一个映射来完成将局部变量名和值放入表达式包装器fn中。对于例如，如果表达式是增量（金额），那么我们可以指定通过将localFn调用为localFn（{amount：22}）来获取金额值。

Answer 2

＆安培;在指令中创建一个函数，该函数在对父作用域进行求值后返回表达式的结果。

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

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

如您所知，有3种AngularJs指令范围方法：＆＃39; @＆＃39;，＆＃39; =＆＃39;，＆＃39;＆amp;＆＃39;，但现在我们要去只讨论＆＃39;＆amp;＆＃39;方法。我们将看到，我们如何实施方法＆＃39;＆amp;＆＃39;在我们的应用程序中。

当我们在当前范围内定义任何函数并希望将其实现到任何指令时，请记住一件事：你必须注意你的函数的参数及其顺序。如果你想要更多，这里是一个很棒的文章：

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

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

3 个答案: