代码之家 › 专栏 › 技术社区 › simple user

即使状态更改,也无法加载ui视图

angular-ui-router angularjs javascript

simple user · 技术社区 · 8 年前

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

指数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>

路由控制器。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>'"
                }
            }
        })
});

登录。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';       
    }
}]);

家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”链接的位置,但它不起作用。即使它正在更改状态(url),但它并没有加载实际视图。

请在这方面帮助我。

1 回复 | 直到 8 年前

31piy 8 年前

您的代码存在结构问题。国家 requestdetail 是的子状态 home.requestsummary 因此,它需要一个 ui-view 在模板中 家请求摘要 状态,它可以将HTML绑定到该状态。

根据你的代码,没有 ui视图 在 Test1.html . 因此,为了确保没有其他问题,您可以尝试添加一个 ui视图 在里面 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>'
})

更改后,只需检查标题是否傅显示在视图中。如果它出现,那么您的代码一切正常。现在,第二部分是加载标题傅在同一个地方 你好,世界 如图所示。

为此,您需要更改视图目标,因为 homedetailview 存在于 Home.html ,它是的父状态 家请求摘要 . 因此,您需要更改的状态配置 home.requestsummary.requestdetail 具体如下:

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

这将绝对针对 homedetailview 在该州 home ,以及您的模板 家请求摘要。请求详细信息 将在那里显示。