Question

我正在尝试使用AngularJS，但我未能实现不同的独立模块和嵌套视图的组合。

我正在尝试做什么：

在顶部，一个用于导航的模块（完全与其他模块分开并且默认始终存在）
然后，基于URL更改内容（最简单的部分）
但是，在上面提到的模块中，另一个用于用户界面的独立模块，如搜索/分页工具栏。该模块应该能够与（动态）“内容”模块交互。我不确定将工具栏放在单独的模板或嵌套模板中是否更好。

我可以让部分内容工作，但不是所有这些内容的组合。目前，我设法让导航工作（作为默认的$ state），但是当我这样做时，其他两个模板似乎都失败了（甚至没有调用控制器）

的index.html

    <html data-ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="./css/style.min.css">
    </head>
    <body>
        <nav class="navbar navbar-fixed-top navbar-dark">
            <div class="container">

                <!-- this should replace the list below! -->
                <div class="container" data-ui-view="navigation"></div>

                <!-- this should be replaced / made dynamic -->
                <div class="navbar-container navbar-primary">
                    <ul class="nav navbar-nav">
                        <li class="nav-item active" data-ng-repeat="entry in navigation">
                            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Costumers</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">...</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- this can either be here, or inside data-ui-view="content" -->    
        <div class="container" data-ui-view="toolbar"></div>

        <div class="container" data-ui-view="content"></div>

        <script src="./js/script.min.js"></script>
    </body>
</html>

customer.html

<!-- the toolbar data-ui-view="toolbar" could be nested here too! better or worse? -->
<div class="card-columns card-columns-4">
    <div class="card" data-ng-repeat="customer in customers">
        <img class="card-img-top" data-src="..." alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">{{customer.firstname}} {{customer.lastname}}</h4>
            <p class="card-text"><small class="text-muted">{{customer.city}}, {{customer.country}}</small></p>
        </div>
    </div>
</div>

myApp.js

var routes = angular.module( 'myApp', [
    'ui.router',
    'toolbarControllers',
    'customerControllers',
    'navigationControllers'
] )

routes.config( [ '$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {

    // trying to set 'navigation' as default view for ALL states
    // other states should just inherit view:navigation and leave it as it is!
    $stateProvider
        .state( 'default', {
            abstract: true,
            views: {
                // also tried: 'navigation@'
                'navigation': {
                    templateUrl: 'view/navigation/navigation.html',
                    controller:  'NavigationController'
                }
                // no other default views, since we don't know the rest! It should be independent if possible
            }
        } )
} ] )

customer.js

var customerControllers = angular.module( 'customerControllers', [ 'ui.router' ] )

customerControllers.config( [ '$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {

    $stateProvider
        .state( 'customers', {
            parent: 'default', // this doesn't seem to happen!
            url: '/customers',
            views: {
                /* 'navigation': {
                    templateUrl: 'view/navigation/navigation.html',
                    controller:  'NavigationController'    
                },*/
                'toolbar': {
                    templateUrl: 'view/ui/toolbar.html',
                    controller:  'ToolbarController'
                },
                'content': {
                    templateUrl: 'view/customers/list.html',
                    controller:  'CustomerListController'
                }
            }
        } )
} ] )

customerControllers.controller( 'CustomerListController', [ '$scope', '$http', function( $scope, $http ) {
    console.log('Customer controller called!') // only works if navigation doesn't work

    // get the data
} ] )

toolbar.js

var toolbar = angular.module( 'toolbarControllers', [] )

toolbar.controller( 'ToolbarController', [ '$scope', '$http', '$state', function( $scope, $http, $state ) {
    console.log( 'Toolbar controller' ) // this works if navigation doesn't works

    // how can I tell customerControllers what to do now on certain events, like filtering of data?
} ] )

navigation.js

var navigation = angular.module( 'navigationControllers', [] )

navigation.controller( 'NavigationController', [ '$scope', '$http', '$state', function( $scope, $http, $state ) {
    console.log('Navigation controller called!') // this works

    // get the data
} ] )

所有内容仍然非常准确，因为我只是在继续之前尝试建立视图之间的基本交互。

目前，使用上面的代码，只有导航有效，而其他两个视图被忽略。如果我删除routes.config（）和parent：“default”中的代码，则其他两个视图似乎可以正常工作。这里的继承不太适用。

如何让所有三个视图同时运行？（导航总是在那里，无论内容如何）
让工具栏与内容（在本例中为customerControllers）进行交互，同时仍然是一个独立模块的最佳方法是什么？（不太重要，我的主要问题是第一个问题）< / LI>

编辑：经过进一步测试后，我得出的结论是，不知何故，父状态会覆盖子状态的设置。这很奇怪：如果我删除parent: 'default'并只在一个地方配置所有内容，它就可以了。一旦我添加parent: 'default'它就会开始失败，因为父配置优先于子配置......但是它不应该完全相反吗？此外，它并不是一个真正的解决方案，因为我正在尝试彼此独立地编写模块。

AngularJS + ui-router

0 个答案: