在使用相同控制器的2個angulrjs選項卡之間切換

Question

我在我的應用程序中使用了angularjs-ui選項卡。

angular.module('bootstrap.tabset', []) 
.directive('tekplntabsets',['tabsetServ', function (tabsetServ) { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     controller: function ($scope) { 
      $scope.templateUrl = ''; 
      var tabs = $scope.tabs = []; 
      var controller = this; 

      this.selectTab = function (tab) { 
       angular.forEach(tabs, function (tab) { 
        tab.selected = false; 
       }); 
       tab.selected = true; 
       tabsetServ.setTabId(tab.tabid); 
      }; 

      this.setTabTemplate = function(templateUrl) { 
       $scope.templateUrl = templateUrl; 
      }; 
      this.setTabController = function(tabCtrl) { 
       $scope.tabCtrl = tabCtrl; 
      }; 
      this.getTabController = function() { 
       return $scope.tabCtrl; 
      }; 

      this.removeTab = function(tab) { 
       var index = tabsetServ.removeTab(tab); 
       this.selectTab(tabs[index - 1]); 
      }; 

      this.addTab = function (tab) { 
       if (tabs.length == 0) { 
        controller.selectTab(tab); 
       } 
       tabs.push(tab); 
       controller.selectTab(tab); 
      }; 
     }, 
     template: 
      '<div class="row-fluid flexbox flexboxContent divHeight100">' + 
      '<div class="row-fluid">' + 
       '<div class="nav nav-tabs" ng-transclude></div>' + 
      '</div>' + 
      '<div class="row-fluid flexbox flexboxContent divHeight100">' + 
       '<ng-include src="templateUrl" class="flexbox flexboxContent divHeight100" ></ng-include>' + 
      '</div>' + 
      '</div>' 
    }; 
}]) 
.directive('tekplntab', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     require: '^tekplntabsets', 
     scope: { 
      title: '@', 
      templateUrl: '@', 
      tabid: '@', 
      closable: '@', 
      tabicon: '@', 
      controller:'@' 
     }, 
     link: function (scope, element, attrs, tabsetController, $route) { 
      tabsetController.addTab(scope); 

      scope.select = function() { 
       tabsetController.selectTab(scope); 
      }; 

      scope.$watch('selected', function() { 
       if (scope.selected) { 
        tabsetController.setTabTemplate(''); 
        tabsetController.setTabTemplate(scope.templateUrl); 
        // scope.$apply(); 
        //$route.reload(); 
        //if (scope.$parent.tektab.ctrl !== "" && scope.$parent.tektab.ctrl !== "DashboardCtrl") { 
        // var ctrl = scope.$parent.tektab.ctrl; 
        // scope.$parent.tektab.ctrl = ""; 
        // scope.$parent.tektab.ctrl = ctrl; 
        //} 
        //if (scope.$root.$$phase !== '$digest' && scope.$$phase !== '$digest') { 
        //  scope.$apply(); 
        // } 
        //scope.$watch('scope.tabid', function (randomValue) { 
        // scope.$apply(); 
        //}); ng-controller="{{controller}}" 
       } 
      }); 
      scope.removeTab = function (id) { 
       tabsetController.removeTab(id); 
      }; 

     }, 
     template: 
      '<li ng-class="{active: selected}" >' + 
      '<a href="" ng-click="select()"><div class="pointerDiv {{ tabicon }}" ng-show="{{closable}}"></div>&nbsp;{{ title }} ' + 
       '<button ng-click="removeTab(title)" class="TabClose" ng-show="{{closable}}">x</button></a>' + 
      '<input type="hidden" value="{{ tabid }}"></input>' + 
      '</li>' 
    }; 


}); 

當我使用此指令打開2個使用不同控制器的選項卡時，它工作良好。 當我想在使用相同控制器的2個選項卡之間切換時，會發生此問題。 （例如，當我打開2個不同的項目，並且我想在項目編號1和項目編號2之間切換時，選項卡不會加載項目編號2的所有數據!!）。 我不想使用angular-ui-router。 項目1和項目2使用相同的局部的html

Answer 1

我管理通過使用Boradcasting消息來解決問題