Question

我是棱角分明的新手。这是我的第一步。我创建了简单的登录页面进行访问。我面临的问题是，当我点击login()按钮时，表单（）未提交，并显示无效的用户名和密码。我刚刚在其他博客中搜索过。但我不理解。

下面是我的代码：

HTML：

<div class="package" ng-controller="credientials">
    <form ng-submit="loginform()"  class="ng-scope ng-pristine ng-valid">
      <label form="emailinput">Email</label>
      <input type="text" class="form-control ng-pristine ng-valid" ng-model="username">
      <label form="pwdinput">Password</label>
      <input type="password" class="form-control ng-pristine ng-valid" ng-model="password">
    <div>
      <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
      <button class="btn btn-primary" ng-click="">Login</button>
    </div><br/>
      <span class="text-danger">{{ error }}</span>
    </form>

Angular JS：

var app = angular.module('logapp',['ngRoute']);
app.config(function($routeProvider){
            $routeProvider
                .when('/login',{
                    templateUrl : "login.html",
                    controller : "loginctrl"
                })
                .when('/home',{
                    templateUrl : "home.html",
                    controller : "homectrl"
                });
            $routeProvider.otherwise({ redirectTo: '/login'});
        });

 app.controller('credientials',['$scope','$route','$http','$window',function($scope,$route,$http,$window){
   $scope.templates =
                [
                    { url: 'login.html' },
                    { url: 'practice.html'}
                ];
                    $scope.template = $scope.templates[0];
                    $scope.loginform = function (username, password) {
                if ( username === 'admin' && password === '1234') {
                    authentication.isAuthenticated = true;
                    $scope.template = $scope.templates[1];
                    $scope.user = username;
                } else {
                    $scope.error = "Invalid username and password";
                };
              };
      app.factory('authentication', function() {
                return {
                isAuthenticated: false,
                user: null
              }
        });

    }]);

Answer 1

您忘记将工厂'身份验证'注入您的控制器。

app.controller('credientials',['$scope','$route','$http','$window',function($scope,$route,$http,$window,authentication){

并且您必须使用$ scope作为您的用户名和密码

 $scope.username === 'admin' && $scope.password === '1234'

然后你会看到你的变量isAuthenticated in factory将是真的

我已更改您的代码here

Answer 2

您需要在范围内输入用户名和密码。也许这会更好：

$scope.username = "";
$scope.password = "";
$scope.loginform = function () {
if ( $scope.username === 'admin' && $scope.password === '1234') {

你应该考虑这个教程 https://docs.angularjs.org/tutorial

任何更好的方法来创建登录页面

2 个答案: