Question

我是角色的新手，在设置自定义指令时遇到了问题。自定义指令的要点是，当它悬停在按钮上时，应该显示当单击时执行指令中的函数。按钮显示正常，但是当我点击它没有任何反应，没有javascript错误。我已经包含了下面的指令代码以及我使用它的html。

addStyleHoverModule.directive('addStyleHover', () => {
    return {
    scope: {
        selectedCampaign: "="
    },
    restrict: 'E',
    link: ($scope, $element, $attr) => {
        let template = `
            <div class="style-hover-box">
                <button class="btn btn-cc buy-it-now-btn add-to-cart-btn add-to-cart-btn-modal"
                    ng-click=addNewStyleCampaign({{selectedCampaign}})>Add to cart</button>
            </div>
        `;

        let templateElement;

        $element.on('mouseenter', () => {
            let {top, left} = $element[0].getBoundingClientRect();

            let t = $element.append(template);
            templateElement = t.find('div');
            templateElement.css({top: `${top}px`, left: `${left}px`});
        });

        $element.on('mouseleave', () => {
            if (templateElement) {
                templateElement.remove();
            }
        });

        $scope.$on('$destroy', () => {
            $element.off('mouseenter').off('mouseleave');
        });
    },
    controller: ($scope, $modal) => {
        $scope.addNewStyleCampaign = (campaign) => {
            debugger;
            let scope = $scope.$new();

            scope.campaignKey = campaign.key;

            $modal({
                templateUrl: addNewStyleModalTpl.name,
                controller: "AddNewStyleModalCtrl",
                scope: scope,
                onHide: () => {
                    $scope.loadCart();
                }
            });
        };
    }
};
});


export default addStyleHoverModule;

HTML：

<add-style-hover selected-campaign="similarCampaign">
<a ng-href="/{{similarCampaign.crossSellPath}}" ng-attr-title="{{similarCampaign.name}}">
<img class="img-responsive" style="width: 150px" ng-src="{{similarCampaign.mockupUrlSmall}}" ng-attr-alt="{{similarCampaign.name}}" ng-attr-nopin="{{similarCampaign.stealthy ? 'nopin' : ''}}"/>
</a>
</add-style-hover>

Answer 1

我相信你需要用引号来做纳克单击=＆＃34; addNewStyleCampaign（所选广告）＆＃34;

Answer 2

您是否尝试在没有插值运算符的情况下使用ng-click？

尝试更改：

ng-click=addNewStyleCampaign({{selectedCampaign}})

为：

ng-click=addNewStyleCampaign(selectedCampaign)

在指令模板中。

角度指令中的按钮不执行ng-click功能

2 个答案: