编程方式添加标签链接到ui.router

我有我的$ stateProvider以下配置：编程方式添加标签链接到ui.router

$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一样？

来源

2014-09-24 slartibartfast

如果您对每个选项卡都有单独的模板，那么您可能需要更改您的概念。 <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>

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'; 
},

动态加载模板

来源

2014-09-24 14:31:34

编程方式添加标签链接到ui.router

回答

相关问题