CODEWITHSUNDEEP
angularjsangular-ui-router
Ricardo
Ricardo

Reputation: 8281

angularjs and ui-router - controller not working

The full source code.

I don't understand why $scope not working in my LoginGuideCtrl controller. I try click on login button and should show a <p> with new data but the $scope is not updating...

Don´t forget I'm trying to achieve a modular design.

I have the following code:

guides.js

var guides = angular.module('main.guides',  ['ui.router']).config(function ($stateProvider) {
  $stateProvider.
  state('guides.login', {
    url: '/login',
    templateUrl: 'modules/guides/views/login.html',
    controller: 'LoginGuideCtrl'
  }).

  ...

  state('guides.mobile', {
    url: '/web',
    template: '<div>guildes mobile</div>',
    controller: 'ListCtrl'
  });
});

controller.js

var guides = angular.module('main.guides');
guides.controller('IndexCtrl', function() {
    console.log('Index');
})
.controller('LoginGuideCtrl', function($scope) {

  console.log('feck');
  $scope.checkLogin = function(){
    $scope.message = "Welcome "+$scope.name+"!"
  };

})
.controller('ListCtrl', function() {
  console.log('List');
})

login.html

<div class="form-group col-sm-2">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr" ng-model="name">
</div>
<div class="form-group col-sm-2">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" ng-model="password">
</div>
<button type="button" class="btn btn-default" ng-click="checkLogin()">Login</button>
<p ng-model="message"></p>

Upvotes: 0

Views: 150

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

ng-model is used with <input> tags to capture user input, by two way binding with your model value.

Since a <p> tag does not collect user input, it won't work with ng-model. Instead just do a one way binding with the value using the curly brackets:

<p>{{message}}</p>

Upvotes: 1

Related Questions