即使状态更改也无法加载 ui-view

Question

我正在使用 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" Link 获取菜单选项卡。我想始终显示菜单选项卡并动态更改下面的文本。

我的问题是，每当我点击 "Hello World" Link 时，我都希望 Foo 出现在 "Hello World" Link 但它不起作用。即使它正在改变状态（url），但它没有加载实际视图。

请帮我解决这个问题。

Answer 1

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

根据您的代码，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 是否出现在视图中。如果它出现，那么您的代码一切正常。现在，第二部分是在显示 Hello world 的 link 的同一位置加载标题 Foo。

为此，您需要更改视图目标，因为 homedetailview 存在于 Home.html 中，这是 home.requestsummary 的 parent 状态。因此，您需要更改 home.requestsummary.requestdetail 的状态配置，如下所示：

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

这绝对会以 home 状态下的 homedetailview 为目标，您的 home.requestsummary.requestdetail 模板将显示在那里。

即使状态更改也无法加载 ui-view

Not able to load ui-view even when the state change

javascript

angularjs

angular-ui-router