Javascript 在使用同一控制器的2个angulrjs选项卡之间切换

我正在我的应用程序中使用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>'
    };


});

angular.module（'bootstrap.tabset'，[]）
.指令（'tekplntabsets'，['tabsetServ'，函数（tabsetServ）{
返回{
限制：'E'，
替换：正确，
是的，
控制器：功能（$scope）{
$scope.templateUrl=''；
var tabs=$scope.tabs=[]；
var控制器=此；
this.selectTab=函数（选项卡）{
角度.forEach（选项卡、函数（选项卡）{
tab.selected=false；
});
tab.selected=true；
tabsetServ.setTabId（tab.tabid）；
};
this.setTabTemplate=函数（templateUrl）{
$scope.templateUrl=templateUrl；
};
this.setTabController=函数（tabCtrl）{
$scope.tabCtrl=tabCtrl；
};
this.getTabController=函数（）{
返回$scope.tabCtrl；
};
this.removeTab=函数（选项卡）{
var指数=tabsetServ.removeTab（tab）；
选择tab（tabs[index-1]）；
};
this.addTab=函数（tab）{
如果（tabs.length==0）{
控制器。选择选项卡（选项卡）；
}
tabs.按下（tab）；
控制器。选择选项卡（选项卡）；
};
},
模板：
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''
};
}])
.指令（'tekplntab'，功能（）{
返回{
限制：'E'，
替换：正确，
要求：“^tekplntabsets”，
范围：{
标题：“@”，
templateUrl:“@”，
tabid:“@”，
可关闭：'@'，
选项卡图标：“@”，
控制器：“@”
},
链接：函数（作用域、元素、属性、tabsetController、$route）{
tabsetController.addTab（范围）；
scope.select=函数（）{
tabsetController.选择tab（范围）；
};
范围：$watch（'选定'，函数（）{
如果（选择范围）{
tabsetController.setTabTemplate（“”）；
setTabTemplate（scope.templateUrl）；
//作用域：$apply（）；
//$route.reload（）；
//if（作用域$parent.tektab.ctrl！==“”&作用域$parent.tektab.ctrl！==“DashboardCtrl”）{
//var ctrl=scope.$parent.tektab.ctrl；
//范围。$parent.tektab.ctrl=“”；
//作用域$parent.tektab.ctrl=ctrl；
//}
//if（scope.$root.$$phase！=='$digest'&&scope.$$phase！=='$digest'）{
//作用域：$apply（）；
//    }
//scope.$watch（'scope.tabid'，函数（随机值）{
//作用域：$apply（）；
//})；ng controller=“{{controller}}”
}
});
scope.removeTab=函数（id）{
tabsetController.removeTab（id）；
};
},
模板：
“
”+
'' +
'' +
“
”
};
});

当我使用此指令打开使用不同控制器的两个选项卡时，效果良好。 当我想在使用同一控制器的两个选项卡之间切换时，就会出现问题。（例如，当我打开两个不同的项目，并希望在项目编号1和项目编号2之间切换时，该选项卡不会加载项目编号2中的所有数据！！）。 我不想使用AngularUI路由器。

---

项目1和项目2使用相同的部分html

我通过使用Boradcasting消息解决了这个问题