角广播多次发射

时间:2014-05-19 10:12:26

标签: javascript angularjs

我有以下html

<div ng-controller = "ParentCtrl">
    Parent Div
    <input type="button" ng-click="getNames()" value="Get Records"></button>
    <li ng-repeat = "name in names">{{name}}</name>
    <div ng-controller="ChildCtrl">

    <li ng-repeat = "name in receivedNames">dsds{{name}}</name>
</div>
</div>

ParentCtrl:

demoApp.controller('ParentCtrl', function($scope){

    $scope.getNames = function()
    {
        $scope.names = ['John','Andrew'];
        $scope.$broadcast('UPDATE_RECORD', $scope.names);

    }
});

ChildCtrl:

demoApp.controller('ChildCtrl', function($scope)
{
    $scope.$on('UPDATE_RECORD', function (event, names)
    {
        $scope.receivedNames = names;
        alert($scope.receivedNames);
    });
});

当我点击“获取记录”按钮时,侦听器上的子控制器会被触发两次。如果names数组有三个项目,它会被触发3次。请帮忙。

1 个答案:

答案 0 :(得分:3)

这是因为您在智能控制器中编写的事件寄存器(UPDATE_RECORD)。当ng-repeat被调用时,它会被调用很多次。

<强>为什么

您已在ng-repeat内定义了子控制器,因此每次迭代都会执行它,并且会注册事件。因此,当您播放它时,它将执行所有已注册的事件。

您应该将代码移到父控制器下面。

$scope.$on('UPDATE_RECORD', function (event, names)
{
    $scope.receivedNames = names;
    alert($scope.receivedNames);
});