Question

好的，这段代码多次调用我的$ emit函数。我想让它只召唤一次。

我有一个控制器和两个指令。总结一下，我希望有一个指令向控制器发送消息，控制器向另一个指令发送消息。需要帮忙。

来自newby angularJS编码器。

enter code here

app.controller("myCtrl", ['$scope', '$http', '$routeParams', 'myCounter', '$rootScope', function ($scope, $http, $routeParams, myCounter, $rootScope) {

///////////////////////////////////////////
Listener = $scope.$on('eventEmit', function (event, args) {

    event.stopPropagation();
    console.log("hi from controller");

    // broadcast down to directives
    childPosition = 0;
    $scope.$broadcast('eventBroadcast', childPosition);

});

// destroy listener
$scope.$on('$destroy', Listener);

}]);

“Page”指令一次只能看到1个“页面”。页面不能存在于另一页面内哪个页面可见将由控制器命令确定

enter code here
app.directive('myPage', function (myCounter) {
return {
    template: '<div  ng-show = "showContent" >content {{counter}}</div>',
    restrict: 'EA',
    controller: 'myCtrl',
    scope: {
        nextPage: '&',
        showContent:'<'

    },

    link: function (scope, element, attr) {

        ///////////////////////////////////////////
        scope.$on('eventBroadcast', function (event, args) {

            console.log("hi from directive");

        });
    }

};


})

“事件”指令将侦听其父元素上的事件，并在其正在侦听的事件发生时发送命令。 2个属性类型 - 应该监听什么事件（比如“点击”）行动 - 事件发生时会发生什么？例如，event指令应该发送一条消息告诉控制器调用NextPage函数

enter code here
app.directive('myEvent',['$rootScope', function (myCounter,$rootScope ) {
return {
    restrict: 'EA',
    controller: 'myCtrl',

    template: '<input type = "button" ng-click = "handlePrev()" ng-
    transclude>Prev</input>' +
      '<input type = "button" ng-click = "handleNext()" ng-
    transclude>Next</input>',
    transclude:true,
    link: function ($scope, element, attrs) {


        $scope.handleNext = function () {

            $scope.functionValue = "nextPage";
            pageController($scope.functionValue, $scope);
           console.log("Clicked next", $scope.functionValue);


        }
        $scope.handlePrev = function () {

            $scope.functionValue = "prevPage";

            pageController($scope.functionValue, $scope);

        }

    }



};
}])


pageController = function ( string, $scope) {


myEmitter = $scope.$emit('eventEmit', string);
$scope.$emit('$destroy', myEmitter);
}

Answer 1

这个问题有三种解决方案：

确保仅调用一次发射（可能无法发射）。
查看被解雇的2个事件。他们是同一个活动吗？例如，它们是单击事件还是单击事件和一个不同事件。如果您只对点击事件感兴趣，请执行类似..
的操作
```
if (event.target.type === 'click') {
   // run your code here
}
```
如果所有其他方法都失败了，您可以对该事件进行去抖动或限制，这意味着它无法在给定的时间范围内调用两次。例如，它将确保在300ms内无法调用两次。第二个电话将被忽略。如果您想使用此方法，请使用Lodash debounce或Lodash throttle。

$ emit被多次调用angularJS

1 个答案: