ng-click is not working in partial using ui-router

Question

I just starting with AngularJS and I have a routing issue with ui-router. Basically I have a partial that displays a button to sign in. The issue is that clicking on that button does not call the corresponding method in the controller.

The module definition:

var myapp = angular.module('myapp', ['ui.state']);

myapp.config(function($stateProvider, $routeProvider) {

  $stateProvider.state('signin', {
        url : "/", // root route
        views : {
            "signinView" : {
                templateUrl : 'signin.html'
            }
        },
        controller: function($scope) {
            $scope.auth = function() { 
        console.log("clicked");
            };
        }
        //controller: 'LoginController'
    }).state('signedin', {
        views : {
            "signinView" : {
                templateUrl : 'partials/signedin.html'
            }
        }
    });

});

The signin.html:

<button class="btn" ng-click="auth()">Sign In</button>

Plunker thats shows the issue.

Where is the button in your plunker?

pasine
– pasine

2013-06-29 16:39:36 +00:00
Commented Jun 29, 2013 at 16:39 — pasine
– pasine, Commented Jun 29, 2013 at 16:39
I fixed the plunker. The button is displayed.

Sydney
– Sydney

2013-06-29 16:49:10 +00:00
Commented Jun 29, 2013 at 16:49 — Sydney
– Sydney, Commented Jun 29, 2013 at 16:49

pasine · Accepted Answer · 2013-06-29 17:04:13Z

4

The controller definition should be inside the view definition.
Your code should look like this.

myapp.config(function($stateProvider, $routeProvider) {

  $stateProvider.state('signin', {
        url : "", // root route
        views : {
            "signinView" : {
                templateUrl : 'signin.html',
        controller: function($scope) {
                $scope.auth = function() { 
        alert("Clicked");
        console.log("clicked");
            };
        }
            }
        }
        //controller: 'LoginController'
    }).state('signedin', {
        views : {
            "signinView" : {
                templateUrl : 'partials/signedin.html'
            }
        }
    });

Here is the Plunker

answered Jun 29, 2013 at 17:04

pasine

11.6k10 gold badges53 silver badges86 bronze badges

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

Comments

Stewie · Accepted Answer · 2013-06-29 17:06:03Z

3

I haven't used ui-router but by the quick look at the code I can see that you controller is defined incorrectly. It needs to reside inside the same object literal that defines your template:

...
"signinView" : {
  templateUrl : 'signin.html',
  controller: function($scope) {
    $scope.auth = function() { 
      alert("Clicked");
      console.log("clicked");
    };
  }
}
...

The ui-router docs are clear about it.

WORKING PLUNKER

answered Jun 29, 2013 at 17:06

Stewie

60.4k20 gold badges149 silver badges113 bronze badges

Collectives™ on Stack Overflow

ng-click is not working in partial using ui-router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related