는, 프로그램

을 ui.router에 링크 탭을 추가 나는 내 $ 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-click 버튼을 통해이 함수를 호출합니다.

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

내 의도는 b 새로운 항목을 탭 객체에 푸시 한 다음 $ 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

는, 프로그램

답변

관련 문제