从Bootstrap中选择每个Tab时加载一个角状态

Question

我有一个具有多个状态的模块，如下所示：

(function() {

'use strict';

var maintenancePortabilityModule = angular.module('maintenance.portability.module',['ui-router']);

maintenancePortabilityModule.config([
    '$stateProvider',
    function ($stateProvider) {
        $stateProvider

           .state('app.maintenance.portability',
            {
                abstract: true,
                url: '/portability',
                template: '<ui-view/>'
            })

             .state('app.maintenance.portability.landing',
            {
                url: '/landing',
                templateUrl: '/app/maintenance/portability/maintenance.portability.landing.view.html',
                controller: 'portabilityImportController'
            })

            .state('app.maintenance.portability.import',
            {               
                url:'/import',
                templateUrl: '/app/maintenance/portability/maintenance.portability.import.view.html',
                controller: 'portabilityImportController'
            })
    }
]);


maintenancePortabilityModule.controller('portabilityImportController',
['$scope', 
    function ($scope) {
        $scope.Message = 'Hello welcome to import page';
    }
]);

})();

现在，我在登陆页面上有一些UI代码，我希望在每个选项卡上加载一个状态。

2>Data Package Management</h2>

<div class="row push-down-md">
    <div class="col-md-12">
        <tabset>
            <tab heading="Create">
                <div>
                    Create Package
                </div>
            </tab>
            <tab heading="Import"  >
                Import view should load here</div>
            </tab>
        </tabset>
    </div>
    </div>

我试过使用多个技巧

>   <div ng-view="app.maintenance.portability.import"></div>

至

<tab heading="Import" ng-view="app.maintenance.portability.import" >

但似乎没有什么东西能呈现出这一景象。有谁能帮我了解一下我在这里应该缺少什么吗？

Answer 1

ui-路由器的依赖项在哪里？修改如下

var maintenancePortabilityModule = angular.module('maintenance.portability.module',['ui-router']); 

猜想这是可行的.

更新：

在Angular UI Bootstrap的帮助下，可以按照选项卡选择的方式显示状态。还请看一下这个post，它解释了如何用ui路由器实现它。

Answer 2

我只是在每个选项卡上使用ng-包含任何我想要使用的视图。它似乎运转良好