个人中心
gpt4 book ai didi

javascript - 即使状态发生变化也无法加载 ui-view

转载 作者：数据小太阳 更新时间：2023-10-29 04:13:12 26 4
gpt4 key购买 nike

我正在使用 Angular UI 路由器。请在下面找到代码。

index.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <script src="../../Scripts/AngularControllers/LoginHomeControllers/RouteMainController.js"></script>
    <script src="../../Scripts/AngularControllers/LoginHomeControllers/LoginController.js"></script>
</head>
<body>
    <div ui-view="mainview"></div>
</body>
</html>

RouteMainController.js

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

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('introduction', {
            url: '/',
            views: {
                'mainview':
                {
                    templateUrl: 'Login.html',
                    controller: 'ctrlLogin'
                }
            }
        })
        .state('login', {
            url: '/login',
            views: {
                'mainview':
                {
                    templateUrl: 'Login.html',
                    controller: 'ctrlLogin'
                }
            }
        })
        .state('home', {
            url: '/home',
            views: {
                'mainview':
                {
                    templateUrl: 'Home.html',
                }
            }
        })
        .state('home.requestsummary', {
            url: '/requestsummary',
            views: {
                'homedetailview':
                {
                    templateUrl: 'Test1.html',
                }
            }
        })
        .state('home.requestsummary.requestdetail', {
            url: '/requestdetail',
            views: {
                'homedetailview':
                {
                    template: "'<h3>Foo</h3>'"
                }
            }
        })
});

Login.html

<div>
    <button id="btnAdd" type="submit"  ng-click="Login()">Login</button>
</div>

LoginController.js

var myApp = angular.module('appHome');
myApp.controller("ctrlLogin", ['$scope', '$location', function ($scope, $location) {
    $scope.Login = function () {
        window.location.href = '#!home/requestsummary';       
    }
}]);

Home.html

<!--Sample Code for displaying Menu Tab and corresponding link-->
<li>
    <a href="#">Employees <span class="caret"></span></a>
    <ul class="dropdown-menu sub-menu">
        <li><a ui-sref=".employeeadd">Add Employee Record</a></li>       
    </ul>
</li>

<div ui-view="homedetailview"></div>

Test1.html

<a ui-sref=".requestdetail">Hello World</a>

我能够成功登录并获得带有“Hello World”链接的菜单选项卡。我想始终显示菜单选项卡并动态更改下面的文本。

我的问题是，每当我点击“Hello World”链接时，我都希望 Foo 出现在“Hello World”链接的位置，但它不起作用。即使它正在改变状态(url)，但它没有加载实际 View 。

请帮我解决这个问题。

最佳答案

您的代码存在结构问题。状态 requestdetail 是 home.requestsummary 的子状态，因此，它需要 home 模板中的 ui-view .requestsummary 状态，它可以将 HTML 绑定(bind)到该状态。

根据您的代码，Test1.html 中没有ui-view。所以，为了确保没有其他问题，您可以尝试在 Test1.html 中添加一个 ui-view，并更改状态配置，如下所示:

<!-- Test.html -->
<a ui-sref=".requestdetail">Hello World</a>
<div ui-view></div>

// RouteMainController.js
...
.state('home.requestsummary.requestdetail', {
  url: '/requestdetail',
  template: "'<h3>Foo</h3>'
})

此更改后，只需检查标题 Foo 是否出现在 View 中。如果它出现，那么您的代码一切正常。现在，第二部分是在显示 Hello world 链接的同一位置加载标题 Foo。

为此，您需要更改 View 目标，因为 homedetailview 存在于 Home.html 中，它是 home.requestsummary< 的父状态。因此，您需要更改 home.requestsummary.requestdetail 的状态配置，如下所示:

// RouteMainController.js
...
.state('home.requestsummary.requestdetail', {
  url: '/requestdetail',
  views: {
    'homedetailview@home': {
      template: "'<h3>Foo</h3>'
    }
  }
})

这将完全针对 home 状态下的 homedetailview，您的 home.requestsummary.requestdetail 模板将显示在那里。

关于javascript - 即使状态发生变化也无法加载 ui-view，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47645350/

26 4 0
文章推荐： javascript - 多部分 HTTP 响应
文章推荐： c# - 有人怎么能像 Java 一样制作 C# 增量编译器？
文章推荐： c# - DTO命名约定、建模和继承
文章推荐： javascript - NodeJS 中的嵌套模板字符串错误
数据小太阳
个人简介

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

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