个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 14:37:34 25 4
gpt4 key购买 nike

我正在尝试实现an answer on another StackOverflow question ，使用 header 中的链接重定向 Index.html 的 ng-view。

直接通过以下方式加载页面时:http://server/#/page 该应用程序可以正常运行(没有控制台错误，页面渲染正确，Angular/js 逻辑运行正确)。当我单步执行逻辑(进入 Angular 库)时，我的路由逻辑返回“未定义”，将我带到 http://server/# 这是一个除了页眉和页脚之外什么都没有的页面正确渲染。

我不确定我做错了什么。

我会对代码中包含的内容进行选择性(只是为了将其保持在合理的长度)，但如果我遗漏了一些重要的内容，请毫不犹豫地请求它。

索引.html:

<!DOCTYPE html>
<html ng-app="passwordResetApp">
<head>
    <title>COP Azure B2B Password Reset</title>
    <meta charset="utf-8"/>
    <!--Lib-->
        <!--ng base-->
            <script src="app/lib.bower/angular/angular.js"></script>
            <script src="app/lib.bower/angular-route/angular-route.js"></script>   
        <!--ui grid-->
            <script src="app/lib.bower/angular-ui-grid/ui-grid.min.js"></script>
            <link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
        <!--Misc-->
            <link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css" />
    <!--Custom-->
    <script src="app/app.js"></script>
    <!--Custom - Services-->
    <script src="app/services/resetRequestService.js"></script>
    <script src="app/services/adValidationService.js"></script>
    <!--Custom - Controllers-->

    <script src="app/controllers/HeaderController.js"></script>
    <script src="app/controllers/PasswordResetRequestController.js"></script>
    <!--Custom modules-->
    <script src="app/modules/header.js"></script>
    <!--Custom - Other-->
    <link rel="stylesheet" href="app/css/passwordReset.css"/>

</head>
<body ng-app>
<div class="container">
    <!--<div ng-include="'app/views/_header.html'"></div>-->
    <div header></div>
    <div class="viewWrapper">
        <div ng-view></div>
    </div>
    <div class="push"></div>
</div>
<div ng-include="'app/views/_footer.html'"></div>
</body>
</html>

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',
                //This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
                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:

<header id="pageHeader">
    <div class="row">
        <div class="col-sm-4 col-md-3 col-lg-2 cop-logo-container">
            <img id="cop-logo" src="app/img/ConocoPhillips_Logo.png" />
        </div>
        <div class="col-sm-4 col-md-6 col-lg-8">
            <h2>Azure B2B Password Reset</h2>
            {{vm.currentUser.name}}
        </div>
        <div class="col-sm-4 col-md-3 col-lg-2">
            <div class="pull-right" style="padding: 20px">
                <div ng-if="vm.currentUser" id="headerUser">
                    <p>Welcome, <span class="username">{{vm.currentUser.name}}</span></p>
                </div>
                <div ng-if="!vm.currentUser">
                    <div class="btn btn-primary">Login</div>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <ul ng-if="vm.currentUser" class="nav navbar-nav">
                    <li><a href="#" ng-click="vm.changeView('home')">Home</a></li>
                    <li><a href="#" ng-click="vm.changeView('userSearch')">Search Users</a></li>
                    <li><a href="#" ng-click="vm.logout()">Logout</a></li>
                </ul>
                <ul ng-if="!vm.currentUser" class="nav navbar-nav">
                    <li><a href="#" ng-click="vm.changeView('home')">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

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);


}());

最佳答案

问题出在 <li><a href="#" ng-click="vm.changeView('home')">Home</a></li>

#所以当点击http://server/#时不是http://server/#/page

关于javascript - 使用 $location.path(..) 路由 ng-view，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37311155/

25 4 0
文章推荐： javascript - 在 Mongoose 中过滤过滤结果
文章推荐： javascript - 在 Javascript 中从二维数组返回字符串
文章推荐： javascript - 如何在 JavaScript 中调用属性(如方法)
文章推荐： javascript - jquery 试图通过名称获取按钮位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com