1

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

我正在尝试做的事情：

  • 最重要的是，一个导航模块（与其他模块完全分开，默认情况下始终存在）
  • 然后，根据 URL 改变一个模块，用于内容（最简单的部分）
  • 但是，在上述模块中，还有另一个独立的用户界面模块，如搜索/分页工具栏。该模块应该能够与（动态）“内容”模块进行交互。我不确定将工具栏放在单独的模板中还是嵌套模板中更好。

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

索引.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>

客户.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
            }
        } )
} ] )

客户.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
} ] )

工具栏.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?
} ] )

导航.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）交互同时仍然是一个独立模块的最佳方式是什么？（不太重要，我的主要问题是第一个问题）

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

4

0 回答 0