作为AngularJs的初学者,我正在研究创建单个页面应用程序,并且我无法将一些早期代码转换为更专业的代码。在进行此转换时,我将所有“页面”html移动到他们自己的.html文件中。我正在使用ng-view然后在我的ng-view div标签内显示正确的html页面。虽然在移动所有代码之后,调用我的方法现在出了问题。具体来说,我认为我的错误在app.config中用于路由或在我的.html文件内容中用于调用此信息。如果我从.html中删除ng-controller div,我如何仍然使用app.config中的默认控制器设置?
这是我的app.route设置:
app.config(['$routeProvider',
function config($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
}]);
然后这是我的mainController设置:
app.controller('mainController', ['$scope', 'LoginService', function ($scope, LoginService) {
//Controller logic goes here
this.isValid = function (username, password) {
var EmailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
var PasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
var EmailReg = new RegExp(EmailRegex);
var PasswordReg = new RegExp(PasswordRegex);
var em = EmailReg.test(username);
var pas = PasswordReg.test(password);
//alert("Hello dude! Email:" + em + " Password:" + pas + "\n" + username + " " + password );
if (em && pas) {
return false;
}
else {
return true;
}
};
this.user =
{
Message: 'Sign in',
ButtonMessage: 'Sign in Bailey',
TempUser: '',
TempPassword: '',
FirstName: '',
LastName: '',
Role: '',
AuthHash: null,
FinalUser: $scope.Username,
FinalPassword: $scope.Password,
};
$scope.user = this.user;
this.Authenicate = function (Username, Password) {
LoginService.Login(Username, Password).then(function (ResponseData)
{
var readAbleObject = angular.fromJson(angular.fromJson(ResponseData));
$scope.user.FirstName = readAbleObject.FirstName;
$scope.user.LastName = readAbleObject.LastName;
$scope.user.Role = readAbleObject.Role;
$scope.user.AuthHash = readAbleObject.AuthHash;
$scope.user.Username = readAbleObject.Username;
$scope.user.Password = readAbleObject.Password;
$scope.user.Message = "Welcome " + $scope.user.FirstName;
$scope.user.ButtonMessage = "Sign " + $scope.user.FirstName + " " + $scope.user.LastName + " out";
$scope.clearInput();
});
};
$scope.clearInput = function () {
this.user.TempUser = null;
this.user.TempPassword = null;
};
}]);
我的html正在等待加载到其中的视图:
<div id="MainDiv" data-ng-app="GApp">
<div id="LoginDiv" class="wrap" data-ng-view="">
</div>
</div>
我的.html文件内容:
<div data-ng-controller="mainController as ctrl">
<div id="HomeHtml">
<link href="Content/Markup/Styles.css" rel="stylesheet" />
<p class="form-title">{{user.Message}}</p>
<form name="login" class="login" novalidate>
<input type="email" placeholder="Susquehanna Software Email" data-ng-model="user.TempUser" />
<input type="password" placeholder="Password" data-ng-model="user.TempPassword" />
<input type="submit" value="{{user.ButtonMessage}}" class="btn btn-lg btn-warning" data-ng-disabled="isValid(user.TempUser, user.TempPassword)" data-ng-click="Authenicate(user.TempUser, user.TempPassword)" />
</form>
</div>
答案 0 :(得分:0)
要使控件看到他们需要分配给$scope
对象的控制器的视图,例如$scope.Authenticate = this.Authenticate
答案 1 :(得分:0)
由于您使用控制器作为语法,如果您编写ctrl.user.TempPassword或通常在用户之前附加ctrl,那么它应该可以工作。
你走在正确的轨道上,你不需要写$ scope.user = this.user。将控制器用作语法的好习惯。
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController',
controllerAs: 'ctrl'
})