編程方式添加標籤鏈接到ui.router

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}) 

我的意圖是b e能夠將新條目推送到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() {}); 

您提供了基於標籤URL dynamically.this意味着，只要你想，你可以添加儘可能多的標籤模板。您甚至可以爲每個選項卡創建一個單獨的控制器，並具有類似的功能

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

，或者你可以像這樣的東西

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

動態加載模板