CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
thurmc
thurmc

Reputation: 525

Button in angular directive not executing ng-click function

I am new to angular and am having issues setting up a custom directive. The point of the custom directive is that when it is hovered over a button should be displayed that when clicked executes a function within the directive. The button is displaying fine but when I click it nothing happens and there are no javascript errors. I've included the directive code below as well as the html where I use it.

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>

Upvotes: 1

Views: 81

Answers (2)

Nonik
Nonik

Reputation: 655

I believe you need to do it in quotes ng-click="addNewStyleCampaign(selectedCampaign)"

Upvotes: 1

hk44
hk44

Reputation: 11

Did you try using ng-click without the interpolation operator?

Try changing:

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

to:

ng-click=addNewStyleCampaign(selectedCampaign)

within your directive template.

Upvotes: 0

Related Questions