Переключение между двумя вкладками 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 разных проекта, и я хочу переключаться между номером проекта 1 и номером проекта 2, вкладка не загружает все данные из проекта №2!). Я не хочу использовать угловой ui-router. проект 1 и проект 2 используют одинаковый частный HTML

Answer 1

мне удалось решить эту проблему с помощью сообщений Boradcasting