angularjs和UI路由器 - 控制器不工作

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> Ť通过与您的模型值进行双向绑定来捕获用户输入。

由于<p>标签不收集用户输入，因此它不适用于ng-model。取而代之的是做一个单向绑定的值使用大括号：

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