个人中心
gpt4 book ai didi

javascript - Ui路由器 : Every state shows template except one

转载 作者：行者123 更新时间：2023-12-03 06:37:38 26 4
gpt4 key购买 nike

我有一个非常令人沮丧的问题...我的 Angular 文件中有一个包含四个模板和四个相应状态的页面。除了一个“细节”之外，它们都工作得很好；我可以通过单击“home”模板中的按钮来访问它，但一旦到达那里，它就不会在模板内呈现 HTML。

angularApp.js:

var app = angular.module('app', ['ui.router']);

app.factory('auth', ['$http', '$window', function($http, $window){
    var auth = {};
    auth.saveToken = function(token){
        $window.localStorage['app-token'] = token;
    };

    auth.getToken = function(){
        return $window.localStorage['app-token'];
    };

    auth.isLoggedIn = function(){
        var token = auth.getToken();

        if(token){
            var payload = JSON.parse($window.atob(token.split('.')[1]));

            return payload.exp > Date.now()/1000;
        }else {return false;}
    };

    auth.currentUser = function(){
        if(auth.isLoggedIn()){
            var token = auth.getToken();
            var payload = JSON.parse($window.atob(token.split('.')[1]));

            return payload.username;
        }
    };

    auth.register = function(user){
        return $http.post('/register', user).success(function(data){
            auth.saveToken(data.token);
        });
    };

    auth.logIn = function(user){
        return $http.post('/login', user).success(function(data){
            auth.saveToken(data.token);
        });
    };

    auth.logOut = function(){
        $window.localStorage.removeItem('app-token');
    };
    return auth;
}]);

app.controller('MainCtrl', [
    '$scope',

    function($scope){
        $scope.greeting = "hello,world";}
    ]);

app.controller('SecCtrl', ['$scope', function($scope){
    $scope.queryObject = {};

}]);


app.controller('AuthCtrl', [
    '$scope',
    '$state',
    'auth',
    function($scope, $state, auth){
        $scope.user = {};

        $scope.register = function(){
            auth.register($scope.user).error(function(error){
                $scope.error = error;}
            ).then(function(){
                $state.go('home');
            });
        };

        $scope.logIn = function(){
            auth.logIn($scope.user).error(function(error){
                $scope.error = error;
            }).then(function(){
                $state.go('home');
            });
        };
    }]);



    app.config([
    '$stateProvider', 
    '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
        $stateProvider

        .state('home',{
            url: '/home',
            templateUrl: '/home.html', 
            controller: 'SecCtrl'

        })
        .state('detail',{
            url: '/detail', 
            templateURL: '/detail.html', 
            controller: 'SecCtrl'
        })      
        .state('login',{
            url: '/login',
            templateUrl: '/login.html', 
            controller: 'AuthCtrl',
            onEnter: ['$state', 'auth', function($state, auth){
                    if(auth.isLoggedIn()){
                      $state.go('home');
                    }
                  }]

        })
        .state('register',{
            url: '/register',
            templateUrl: '/register.html',
            controller: 'AuthCtrl',
            onEnter: ['$state', 'auth', function($state, auth){
                    if(auth.isLoggedIn()){
                      $state.go('home');
                    }
                  }]

        });
        $urlRouterProvider.otherwise('home');



        }

    ]);

索引.ejs:

<!DOCTYPE html>
<html>
  <head>

    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="javascripts/angularApp.js"></script>
  </head>
  <body ng-app = "app">

   <div class="row">
     <div class="col-md-6 col-md-offset-3">
       <ui-view></ui-view>
     </div>
   </div>



   <script type="text/ng-template" id="/home.html"><a ui-sref="detail">
        <button >Go to Details</button></a>

   </script>

   <script type="text/ng-template" id="/detail.html">
      <h1>Details!</h1>    <!--This is the part that won't show up -->
   </script>

   <script type="text/ng-template" id="/login.html">
      <div class="page-header">
        <h1>Flapper News</h1>
      </div>

        <div ng-show="error" class="alert alert-danger row">
          <span>{{error.message}}</span>
        </div>

        <form ng-submit="logIn()"
          style="margin-top:30px;">
          <h3>Log In</h3>

          <div class="form-group">
            <input type="text"
            class="form-control"
            placeholder="Username"
            ng-model="user.username"></input>
          </div>
          <div class="form-group">
            <input type="password"
            class="form-control"
            placeholder="Password"
            ng-model="user.password"></input>
          </div>
          <button type="submit" class="btn btn-primary">Log In</button>
        </form>
    </script>

    <script type="text/ng-template" id="/register.html">
      <div class="page-header">

      </div>

      <div ng-show="error" class="alert alert-danger row">
        <span>{{ error.message }}</span>
      </div>

      <form ng-submit="register()"
        style="margin-top:30px;">
        <h3>Register</h3>

        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Username"
          ng-model="user.username"></input>
        </div>
        <div class="form-group">
          <input type="password"
          class="form-control"
          placeholder="Password"
          ng-model="user.password"></input>
        </div>
        <button type="submit" class="btn btn-primary">Register</button>
      </form>
    </script>

  </body>
</html>

预先感谢您提供的任何帮助!

最佳答案

试试这个。将 templateURL 更改为 templateUrl: 

 .state('detail',{
            url: '/detail', 
            templateUrl: '/detail.html', 
            controller: 'SecCtrl'
        })

关于javascript - Ui路由器 : Every state shows template except one，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38117925/

26 4 0
文章推荐： 悬停效果上的 JavaScript 不适用于子链接
文章推荐： security - 如何验证邮件来源？
文章推荐： cassandra - 无法从不同主机连接到 cassandra 节点
文章推荐： javascript - Highcharts 图表不可见