Question

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

请参阅以下plunker。

基本上，添加新标签按钮将广播在TabController中处理的collectDataFromCurrentTab消息。见下文：

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的{{1}}内。不要从您的addNewTab广播TabController，因为您有多个Tab $范围，您的广告多次addNewTab。确保修复了你的plunker，你重复了NavigationController次。

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

1 个答案: