2016-04-01 14 views
0

Ich habe Tab component:Angular Registerkarte Controll url ändern

<body ng-app="components"> 
    <h3>BootStrap Tab Component</h3> 
    <tabs> 
    <pane title="First Tab"> 
     <div>This is the content of the first tab.</div> 
    </pane> 
    <pane title="Second Tab"> 
     <div>This is the content of the second tab.</div> 
    </pane> 
    </tabs> 
</body> 

und Logik:

angular.module('components', []). 
    directive('tabs', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     controller: [ "$scope", function($scope) { 
     var panes = $scope.panes = []; 

     $scope.select = function(pane) { 
      angular.forEach(panes, function(pane) { 
      pane.selected = false; 
      }); 
      pane.selected = true; 
     } 

     this.addPane = function(pane) { 
      if (panes.length == 0) $scope.select(pane); 
      panes.push(pane); 
     } 
     }], 
     template: 
     '<div class="tabbable">' + 
      '<ul class="nav nav-tabs">' + 
      '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
       '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 
      '</li>' + 
      '</ul>' + 
      '<div class="tab-content" ng-transclude></div>' + 
     '</div>', 
     replace: true 
    }; 
    }). 
    directive('pane', function() { 
    return { 
     require: '^tabs', 
     restrict: 'E', 
     transclude: true, 
     scope: { title: '@' }, 
     link: function(scope, element, attrs, tabsCtrl) { 
     tabsCtrl.addPane(scope); 
     }, 
     template: 
     '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
     '</div>', 
     replace: true 
    }; 
    }) 

Nachdem ich würde Ereignis für Änderung url nach Klick, ohne die Seite neu laden erstellen möchten, wie folgt aus:

.../home?first 
.../home?second 
.../home?three 

Hilf mir bitte beheben Sie diese Probleme, vielen Dank.

+0

können Sie einen Plünderer bereitstellen? – madalinivascu

+1

http://jsfiddle.net/Wijmo/ywUYQ/ –

+0

@madalinivascu Herr Sie haben einige Ideen, wie Sie es beheben können? –

Antwort

-1

bitte versuchen Sie dies:

angular.module('myApp', [ui.router]) 
    .config(['$urlRouterProvider', function ($urlRouterProvider) { 
    $urlRouterProvider.deferIntercept(); 
    }]) 
    // then define the interception 
    .run(['$rootScope', '$urlRouter', '$location', '$state', function ($rootScope, $urlRouter, $location, $state) { 
    $rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) { 
     // Prevent $urlRouter's default handler from firing 
     e.preventDefault(); 

     /** 
     * provide conditions on when to 
     * sync change in $location.path() with state reload. 
     * I use $location and $state as examples, but 
     * You can do any logic 
     * before syncing OR stop syncing all together. 
     */ 

     if ($state.current.name !== 'main.exampleState' || newUrl === 'http://some.url' || oldUrl !=='https://another.url') { 
     // your stuff 
     $urlRouter.sync(); 
     } else { 
     // don't sync 
     } 
    }); 
    // Configures $urlRouter's listener *after* your custom listener 
    $urlRouter.listen(); 
    }]); 
+0

finden Sie unter https://github.com/angular-ui/ui-router/issues/64 –

-1

hier ist ein plnk aus Ihrem Code.

Ich habe eine benutzerdefinierte codierte directiveaction namens click auf dem panes zu verlängern. Die Direktive hat ihrerseits eine Funktion, die mit function\event name definiert ist und mit der title von jedem pane übereinstimmt.

können Sie Ihre route im Aktions Körper Codes durch den alert

Glückliches Entfernen Coding!

+0

ein Grund ohne Grund gibt keinen Raum für Korrekturen – manish

Verwandte Themen