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”链接的菜单选项卡。我想始终显示菜单选项卡并动态更改以下文本。

我的问题是每当我点击“Hello World”链接时，我都希望 Foo 代替“Hello World”链接，但它无效。即使它正在改变状态（url），但它没有加载实际视图。

请帮我解决这个问题。

Answer 1

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

根据您的代码，ui-view中没有Test1.html。因此，为了确保没有其他问题，您可以尝试在ui-view中添加Test1.html，并按如下方式更改状态配置：

<!-- 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 链接的同一位置加载标题 Foo 。

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

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

这绝对会定位到州homedetailview中的home，home.requestsummary.requestdetail的模板会显示在那里。

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

1 个答案: