基本上我的问题是我有一个AngularJS视图(home.html),其中包含一个双括号中的变量,如下所示:{{message}}
当修改$ scope.message变量时,视图与不更新,虽然它应该?我尝试添加$ scope。$ apply()会导致“正在进行中的操作”
中出现异常检查下面的代码。当在MainCtrl中调用$ scope.doLogin时,home.html中的{{message}}部分没有被更新,即使我已将$ scope.message设置为该函数中的新值。
非常感谢任何帮助,如果需要进一步的信息,请询问。
的index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">TriviaAttack</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form id="loginForm" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="loginData.username">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="loginData.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
</div>
<div ng-view>
</div>
</div>
<script src="./app/app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</body>
</html>
home.html的
<div>
<h1>Welcome to the Home Page</h1>
<p>{{message}}</p>
</div>
app.js
var myApp = angular.module('myApp',['ngRoute', 'ngStorage']);
myApp.controller('MainCtrl', ['$rootScope', '$scope', '$location',
function($rootScope, $scope, $location) {
$scope.message = 'testing message';
$scope.loginData = {
username: '',
password: '',
loggedIn: false
}
$scope.doLogin = function() {
$scope.message = 'message changed!';
$scope.$apply();
Auth.doLogin($scope.loginData.username, $scope.loginData.password)
.success(function(data) {
if (data.success) {
AuthToken.setToken(data.token);
$location.path('/home');
console.log($scope.loginData.loggedIn);
}
});
$scope.loginData = {};
}
}]);
//Middleware for all requests which adds the users token to the HTTP header.
myApp.factory('TokenInterceptor', ['$q', '$location', '$localStorage',
function($q, $location, $localStorage) {
//On each request, check if the user is logged in with a valid token.
var interceptor = {
request: function(config) {
config.headers['X-Authorization-Token'] = $localStorage.token;
return config;
},
responseError: function(response) {
if(response.status === 401 || response.status === 403) {
$location.path('/login');
}
return $q.reject(response);
}
};
return interceptor;
}]);
myApp.config(['$routeProvider','$locationProvider','$httpProvider',
function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.
when('/', {
templateUrl: './app/views/landingpage.html',
controller: 'MainCtrl'
}).
when('/home', {
templateUrl: './app/views/home.html',
controller: 'MainCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('TokenInterceptor');
}
]);
console.log('app.js loaded!');
答案 0 :(得分:2)
每次加载视图时,都会执行带有新范围的控制器代码,以便不反映新消息。 所以流程就像 landingPage的控制器是MainCtrl,其范围在执行$ scope.doLogin时将$ scope.message变量更改为&#34; Message Changed&#34;在将位置更改为home时,MainCtrl被分配到具有新范围的主页,该范围将继续执行MainCtrl的第一行,即
$scope.message = 'testing message';
因为您决定使用通用控制器登录和主页
尝试删除
中的控制器选项 when('/', {
templateUrl: './app/views/landingpage.html',
controller: 'MainCtrl'
}).
when('/home', {
templateUrl: './app/views/home.html',
controller: 'MainCtrl'
})
并在
中指定控制器<div ng-controller="MainCtrl">
<!--omitted-->
<div ng-view></div>
</div>
或者其他选项是传递参数或使用 ui-router,其中嵌套视图将自动从父控制器继承而无需重新运行控制器逻辑。
答案 1 :(得分:1)
问题出在控制器覆盖范围
<div ng-controller="MainCtrl">
<!--omitted-->
</div>
<div ng-view></div>
你的 $ scope.message 对你的 MainCtrl 来说很紧张,所以当你填充ng-view
时,你除了它有MainCtrl
,但是确实它不在那个div之内,所以只是没有看到该变量,为了使其工作,将 ng-view 插入 MainCtrl div,如图所示以下
<div ng-controller="MainCtrl">
<!--omitted-->
<div ng-view></div>
</div>
您倾向于使用ng-route但是您没有任何路由配置,ng-view
将永远不会填充home.html
,除非您配置routeProvider,首先,制作一些路由如描述here,执行您的表单操作,重定向到页面并相应地填充视图,它应该工作。