添加新选项卡时，AngularJS 和 AngularUI 引导加倍选项卡

Question

我正在尝试为每个新的 AngularUI 选项卡构建一个可重用的指令（具有隔离范围）。当我尝试收集选项卡内的所有数据并添加一个新选项卡时，Angular 实际上所做的是将我现有的选项卡加倍并收集每个现有选项卡的数据，每次我按“添加新选项卡”时。

请看下面plunker。

基本上，添加新选项卡按钮将广播一个collectDataFromCurrentTab 消息，该消息在TabController 内部处理。见下文：

app.controller('TabController', function($scope, $rootScope) {
console.log("Scope id in tab is: " + $scope.$id);

$rootScope.$on('collectDataFromCurrentTab', collectDataFromTab);

function collectDataFromTab() {
    console.log("Scope id in collectDataFromCurrentTab: " + $scope.$id);
    var collector = {};
    collector.currentName = $scope.name;
    collector.currentAddress = $scope.address;

    $rootScope.collectedData.push(collector);

    console.log("Collected data: " + collector.currentName + " - " + collector.currentAddress);

    $rootScope.$broadcast('addNewTab');
}

app.controller('NavigationController', function($scope, $rootScope) {
$scope.addNewTab = function() {
    $rootScope.$broadcast('collectDataFromCurrentTab');
}

对此有任何解决方法的想法吗？

Answer 1

将$rootScope.$broadcast('addNewTab'); 移动到$scope.addNewTab 函数中的NavigationController 中。不要从你的TabController 广播addNewTab，因为你有多个 Tab $scopes，你在广播多次addNewTab。确保修复你的 plunker，NavigationController 重复了两次。