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>