CODEWITHSUNDEEP
javascriptjqueryangularjs
How To Learn
How To Learn

Reputation: 301

how to add ng click handler dynamically in jquery smart wizard for next button

I'm just trying to add ng-click handler to a button. How can i do this? I tried the below code but it's not working,any help appreciated.

btNext = $('<a>' + options.labelNext + '</a>').attr("href", "").addClass("buttonNext");
$('.buttonNext').attr('ng-click', 'LoadSecondDivDetails()');

Upvotes: 0

Views: 453

Answers (2)

billy_comic
billy_comic

Reputation: 899

Mixing angularJS and jquery is not recommended. AngularJS is already handling DOM elements and you can really end up with some unwanted behavior. I would keep the entire wizard in an angularJS format using ngShow/ngHide to create the wizard form(s) for the wizard. Then you can just scope a variable to ng-show

 ng-show="currentPage == 1"

and then have submit run a function that changes to the next section of the wizard.

ng-submit="loadNext(2)"

and you have a function that handles all of this. Something like

$scope.loadNext = function () {
   $scope.currentPage += 1;
};

$scope.goBack = function () { //this can be your back button
    $scope.currentPage -= 1;
};

Upvotes: 0

Andrew Donovan
Andrew Donovan

Reputation: 552

This doesn't work because AngularJS compiles your code once.

In order for ng-click to work, you need to tell it to compile again.

Use $compile provider to tell AngularJS to recompile your portion of html.

In your case: 

btNext = $compile('<a ng-click="your_action()"></a>')($scope);

Upvotes: 1

Related Questions