Angularjs Navigationsmenü mit UI-Bootstrap-Registerkarten und UI-Router

Imdieser Plunker, Ich kann keine Menü-Links und Tabs erstellen, die ordnungsgemäß funktionieren. Wie Sie sehen, muss ich zweimal auf "Route 1" klicken, um von den Registerkarten "Route 2" zurückzukehren. Wenn ich außerdem zweimal auf den Menülink "Route 2" klicke, wird der Inhalt der Registerkarten nicht gerendert.

Ich denke, dies ist der relevante Teil des Codes, der wichtig ist:

myapp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('route1', {
      url: "/",
      templateUrl: "route1.html"
    })
    .state('DocumentoMasterView', {
      url: "/route2",
      templateUrl: "route2.html",
      controller: 'myAppController'
    })
    .state('DocumentoMasterView.A', {
      url: '/detail',
      templateUrl: 'route2.A.view.html',
      controller: 'myAppController'
    })
    .state('DocumentoMasterView.B', {
      url: '/image',
      templateUrl: 'route2.B.view.html',
      controller: 'myAppController'
    })
    .state('DocumentoMasterView.C', {
      url: '/submenu',
      templateUrl: 'route2.C.view.html',
      controller: 'myAppController'
    })

});

 myapp.controller('myAppController',['$scope','$state',function($scope, $state){
        $scope.tabs = [
           { heading: 'A View', route:'DocumentoMasterView.A', active:true},
           { heading: 'B View', route:'DocumentoMasterView.B', active:false },
           { heading: 'C View', route:'DocumentoMasterView.C', active:false }
        ];

        $scope.go = function(route){
           $state.go(route);
        };

        $scope.active = function(route){
           return $state.is(route);
        };

       $scope.$on('$stateChangeSuccess', function() {            
         $scope.tabs.forEach(function(tab) {
               tab.active = $scope.active(tab.route);
         });
       });

Antworten auf die Frage(2)

Ihre Antwort auf die Frage