Question

这是我的 index.html

<html ng-app="dempApp">
<head>
<!-- CSS -->
</head>
<body>
<div ng-switch on="templateHeader">
            <div ng-switch-when="login">
                <div loginheader></div>
            </div>

            <div ng-switch-when="home">
                <div homeheader></div>

            </div>
        </div>
</body>
<!-- JS scripts -->
</html>

我的 app.js 有指令

demoClientApp.directive('loginheader', function () {
      return {
        restrict: 'A',
        replace: true,
        templateUrl:'views/loginheader.html'
      }
})

demoClientApp.directive('homeheader', function () {
      return {
        restrict: 'A',
        replace: true,
        templateUrl:'views/homeheader.html'
      }
})

loginheader.html 如下所示

<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <h1>
                            <span class="blue">DemoApplication</span>
                        </h1>
                    </div>
                    <div class="position-relative">
                        <div ng-view></div>
                    </div><!-- /position-relative -->
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->

内部有 ng-view ，同样对于homeheader指令我还有另一个html文件，它也有ng-view。

基于路径，我设置templateHeader的值并切换指令。但该页面现在是空白的并显示错误。

Error: Template must have exactly one root element. was: <div class="main-container">
    <div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="login-container">
                        <div class="center">
                            <h1>
                                <span class="blue">DemoApplication</span>
                            </h1>
                        </div>
                    <div class="position-relative">
                        <div ng-view></div>
                    </div><!-- /position-relative -->
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->

如果我不使用 loginheader 指令并直接使用html，它工作正常，其他 homeheader 指令正在运行。那是为什么？

如何解决？

更新1

它正在发挥作用。但问题是当路径只是localhost:9000时，它没有重定向到登录。如果用户输入错误的路径或未登录，它之前用于路由登录。所以现在当我只输入URL localhost:9000时，它显示空白页面和错误。这是我的路线。

var demoClientApp=angular.module('demoClientApp', ['ngCookies']);

demoClientApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
    .when('/home', {
       templateUrl: 'views/dashboard.html',
       controller: 'DashboardCtrl'
    })

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

AngularJS - 自定义指令 - 一个给出错误“模板必须只有一个根元素”而其他工作

0 个答案: