angularjs и пользовательский интерфейс-маршрутизатор - контроллер не работает

Question

The full source code.

Я не понимаю, почему $ сфера не работает в моем контроллере LoginGuideCtrl. Я пытаюсь нажать кнопку входа в систему и должен показать <p> с новыми данными, но область $ не обновляется ...

Не забывайте, что я пытаюсь достичь модульного дизайна.

У меня есть следующий код:

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> 

Answer 1

ng-model используется с <input> T ags для захвата ввода пользователем, путем двусторонней привязки к вашему значению модели.

Поскольку тэг <p> не собирает пользовательский ввод, он не будет работать с ng-model. Вместо этого просто сделайте одностороннее связывание со значением с помощью фигурных скобок:

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