时间戳

首页 > 解决方案 > XML 解析错误：AngularJS 中的文档元素后出现垃圾

angularjs - XML 解析错误：AngularJS 中的文档元素后出现垃圾

问题描述

我正在使用 Angular JS 并创建了一个简单的登录表单，并且还实现了成功登录后路由到下一页的路由。

但是当我尝试实现条件路由时，登录后我可以路由到我的应用程序中的下一页，但页面内容没有显示。

下面显示的是我的应用程序结构。

在此处输入图像描述

我创建了一个controller.js 文件、一个login.html 和dashboard.html 文件

controller.js：

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider

    .when('/', {
        templateUrl : "login.html"
    })

    .when('/dashboard', {
        resolve: {
            "check" : function($location, $rootScope) {
                if(!$rootScope.loggedIn) {
                    $location.path('/');
                } else{
                   templateUrl : "dashboard.html" 
                }
            }
        } 
    })

    .otherwise({
        redirectTo : '/'
    });
});

app.controller('loginCtrl', function($scope ,$location , $rootScope) {
    $scope.submit = function(){

        if($scope.username == 'asd' && $scope.password == 'asd' ){
            $rootScope.loggedIn = true;
            $location.path('/dashboard');
        }
        else
        {
            alert("Invalid username and password")
        }
    };
});

login.html：

<div class="col-sm-8 col-sm-push-4">
</div>

<div class="col-sm-4 col-sm-pull-4">
<div ng-controller="loginCtrl">

<br><br><br><br><br><br>
<h3>Login </h3><hr>
  <form action="/"  id="myLogin">

    <div class="form-group">
      <label for="username">UserName:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
    </div>

    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>

    <button type="button" class="btn btn-default" ng-click="submit()">Login</button>
  </form>
</div>
</div>

dashboard.html：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">MY APP</a>
    </div>

  </div>
</nav>
<br/>
<nav class="navbar navbar-inverse" style="margin: auto;">
  <div class="container-fluid">
    <div class="navbar-header">

    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#page1.html">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

这是我的输出窗口

在此处输入图像描述

谁能帮我解决这个错误...！

标签： angularjsbootstrap-4

解决方案

尝试：

.when('/dashboard', {
    templateUrl: 'dashboard.html',
    resolve: {
        "check" : function($location, $rootScope) {
            if(!$rootScope.loggedIn) {
                $location.path('/');
            }
        }
    } 
})

这是工作的plunkr

在您的代码中需要考虑的其他几点：

  1. 在阶段本身使用控制器名称，config而不是在 html 中写入ng-controller

前任：

 .when('/', {
    templateUrl : "login.html",
    controller : 'loginCtrl'
 })
  1. action从标签中删除，<form>因为您正在处理 via angularJS& useng-submit。

前任：

<form id="myLogin" ng-submit="submit()">
  1. 删除$rootScope.loggedIn，因为rootScope不鼓励使用变量，而是使用factories

推荐阅读