使用$location.path(..)进行ng-view路由

19 浏览
0 Comments

使用$location.path(..)进行ng-view路由

我正在尝试实现StackOverflow上另一个问题的答案,使用头部的链接来重定向Index.html的ng-view。当直接通过http://server/#/page加载页面时,应用程序正常工作(没有控制台错误,页面正确渲染,Angular/JS逻辑正确运行)。当我通过逻辑(进入Angular库)一步一步地调试时,我的路由逻辑返回'undefined',将我带到了http://server/#这是一个空白页面,只有头部和页脚正确渲染。
我不确定我做错了什么。
我在代码中会有选择性地包含一些内容(为了保持合理的长度),但如果我漏掉了重要的内容,请不要犹豫地要求它。
Index.html:




    COP Azure B2B密码重置
    
    
        
            
               
        
            
            
        
            
    
    
    
    
    
    
    
    
    
    
    
    


    



app.js:

(function() {
    'use strict';
    var app = angular.module('passwordResetApp', ['ngRoute']);
    app
        .config(
        function($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'app/views/passwordReset.html',
                controller: 'ResetRequestController as vm',
                caseInsensitiveMatch: true
            }).when('userSearch', {
                templateUrl: 'app/views/userSearch.html',
                controller: 'ResetRequestController as vm',
                caseInsensitiveMatch: true
            }).otherwise({ redirectTo: '/' });
        }
    );
    app.directive('header',
        function() {
            return {
                restrict: 'A',
                //这意味着它将被用作属性而不是元素。我不喜欢创建自定义HTML元素
                replace: true,
                templateUrl: 'app/views/_header.html',
                controller: 'HeaderController as vm',
                caseInsensitiveMatch: true
            }
        });
    app.run([
        '$route', '$http', '$rootScope',
        function ($route, $http, $rootScope) {
            $http.defaults.withCredentials = true;
            $rootScope.getUrlPath = function (url) {
                return baseUrl + url;
            };
        }
    ]);
}());


_header.html:



HeaderController.js:

(function() {
    'use strict';
    var app = angular.module('passwordResetApp');
    var headerController = function ($scope, $location) {
        var vm = this;
        vm.currentUser = {};
        vm.currentUser.name = 'caninc';
        vm.changeView = function(view) {
            $location.path(view);
        }
    };
    app.controller('HeaderController', headerController);
}());

0
0 Comments

问题出现的原因是在代码中的`Home`,因为`#`导致点击时跳转的链接是`http://server/#`而不是`http://server/#/page`。在查找问题时,我一直在JavaScript代码中寻找原因,没有想到去检查这个链接。

解决方法是将`Home`中的`#`修改为`#/page`,即将链接改为`Home`。这样点击时跳转的链接就是正确的`http://server/#/page`了。

0