Question

我的$ stateProvider有以下配置：

$stateProvider
    .state("main", { abstract: true, url: "/main", templateUrl: "main.html" })
    .state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
    .state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
    .state("main.tab3", {
        url: "/tab3/{id}",
        templateUrl: "tab3.html",
        controller: function($scope, $stateParams) {
            console.log("ID is " + $stateParams.id)
            $scope.id = $stateParams.id;
        }
     });

我将主要内容组织到此控制器下的标签中：

<div ng-controller="mainController">
    <tabset>
        <tab ng-repeat="t in tabs"
             heading="{{t.heading}}"
             select="go(t.route)"
             active="t.active">
        </tab>
    </tabset>

    <h2>View:</h2>
    <div ui-view></div>
</div>

现在，通过在main.html中按住ng键的按钮，我可以调用此功能：

$scope.tabs.push({heading: "Tab 3", route: "main.tab3", active: true})

我的目的是能够将新条目推送到tabs对象上，然后通过$ stateProvider配置将内容加载到新创建的选项卡中。

问题是，如何通过路径传递参数，就像我直接调用/ tab3 / 1234一样？

Answer 1

如果每个标签都有单独的模板，那么您可能想要更改您的概念。 <tabset>指令实际上不适用于动态工作。

这是我为标签演示创建的小提琴。

http://jsfiddle.net/Serhioromano/t7s3jrg4/

<强> HTML

<div class="container" ng-app="MyTabs">
    <div class="page-header">
         <h1><a href="#/tab/1">Site Name</a></h1>

    </div>
    <ul class="nav nav-tabs">
        <li ng-class="{'active': tab == 1}"> <a href="#/tab/1">Pictures</a></li>
        <li ng-class="{'active': tab == 2}"> <a href="#/tab/2">Posts</a></li>
        <li ng-class="{'active': tab == 3}"> <a href="#/tab/3">Videos</a></li>
        <li ng-class="{'active': tab == 4}"> <a href="#/tab/4">Other</a></li>
    </ul>
    <div ui-view></div>
    <footer>    
        <small>Build with Tabs</small>
    </footer>
</div>

<强> JS

angular.module('MyTabs', ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/tab/1');

    $stateProvider
        .state('app', {
            url: "/tab",
            abstract: true,
            template: "<div ui-view></div>",
            controller: function ($scope) {
                $scope.form = {};
            }
        })
        .state('app.tab', {
            url: '/:tab',
            template: function ($stateParams) {
                return '<h2>This is tab ' + $stateParams.tab + 
                  '</h2><input type="text" ng-model="form.name' + $stateParams.tab + '" />';
            },
            controller: function ($scope, $state, $stateParams, $rootScope, $log) {
                $rootScope.tab = parseInt($stateParams.tab);
            }
    });
})
    .run(function () {});

您可以动态地根据标签页提供模板。这意味着您可以根据需要添加任意数量的标签。您甚至可以为每个选项卡创建一个单独的控制器。

controllerProvider: function($stateParams) {
      var ctrlName = "Controller" + $stateParams.tab;
      return ctrlName;
}

或者你可以用这样的东西动态加载模板

templateUrl: function ($stateParams) {
     return 'partials/' + $stateParams.tab + '.html';
},

以编程方式添加链接到ui.router的选项卡

1 个答案: