AngularJS: ng-click with function and changing variable's state

Question

I'm trying to use Bootstrap 3 modals with AngularJS. I have two buttons: Log in and Sign up, and after clicking on them I want a modal to pop up. Based on which button user has chosen, I need to display appropriate content. To manage this, I use ng-show and ng-hide inside modals. Everything works fine, but in this piece of code my variable isRegistrationPage doesn't change its state.

button.btn.btn-default.navbar-btn.btn-info ng-click="isRegistrationPage=false;open('sm')" Log in

button.btn.btn-default.navbar-btn.btn-warning ng-click="isRegistrationPage=true;open('sm')" Sign up

I'm using almost raw JS part from https://angular-ui.github.io/bootstrap/#/modal

Is it any other good way to manage my goal?

I think you just solved your own problem with that comment @MarcinMantke. Don't mix plain javascript with Angular. If you're using a js-library, use it all the way. — wvdz
– wvdz, Commented Apr 21, 2015 at 20:04
I don't mix plain JS with Angular. What I ment was that I use isRegistrationPage within HTML code, like that: ng-init="isRegistrationPage" and change it later by ng-click="isRegistrationPage=false or so. But when I need to open modal AND change isRegistrationPage then it won't work. — mefe
– mefe, Commented Apr 21, 2015 at 22:36

jarz · Accepted Answer · 2015-04-21 19:40:30Z

1

You could have two functions in your controller, one per button, then call open('sm') from there.

Something like this:

$scope.onLoginClicked = function(){
    $scope.isRegistrationPage = false;
    open('sm');
}
$scope.onSignupClicked = function(){
    $scope.isRegistrationPage = true;
    open('sm');
}

Then just use them on the ng-click

answered Apr 21, 2015 at 19:40

jarz

7327 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mefe Over a year ago

I followed your answer and it was almost correct. Thing is, that with using angular-ui bootstrap modal, you have to use $rootScope.isRegistrationPage, not just $scope.isRegistrationPage. But apart from that everything was fine and led me straight into correct answer.

AndrasCsanyi · Accepted Answer · 2015-04-21 19:49:16Z

I think you try to use the modal service in a wrong way, especially how you want to pass through the isRegistrationPage variable.

Take a look at the code snippets below:

Here you can see part of my controller where the editBlogEntry method is responsible for opening the modal window. Note the resolve part where I can pass through variables.

function editBlogEntry(blogEntryId)
        {
            var modalInstance = $modal.open({
                templateUrl: '/ui/app/dilib/partials/blog/blog-entries/blog-entry-form.html',
                controller: 'editBlogEntryController as vm',
                size: 'lg',
                resolve: {
                    selectedBlogEntryId: function ()
                    {
                        return blogEntryId;
                    }
                }
            });

            modalInstance.result
                .then(function (result)
                {
                    logSuccess('Blog entry is modified!');
                    $route.reload();
                });

        }

This is part of the controller which will be instantiated when the modal window is opened. Note the selectedBlogEntryId which is the passed through variable.

var controllerId = 'editBlogEntryController';

    angular
        .module('dilibApp')
        .controller(controllerId, ['$scope', '$modalInstance', 'selectedBlogEntryId', 'common', 'datacontext', 'dataservice.blogentry.helper', editBlogEntryController]);

    function editBlogEntryController($scope, $modalInstance, selectedBlogEntryId, common, datacontext, dataServiceBlogEntryHelper)
    { /*... javascript magic ...*/}

HTML part, where you can see that the edit method is bound to a button element.

<button class="btn" ng-model="blogEntry.id" ng-click="vm.editBlogEntry(blogEntry.id)">edit</button>

Collectives™ on Stack Overflow

AngularJS: ng-click with function and changing variable's state

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related