如何将$ scope。$ on绑定到两个动作,但只执行一个函数?

时间:2015-01-24 20:26:00

标签: angularjs angularjs-directive angularjs-scope

问题:

我有一个指令,它在两个地方使用,但做同样的事情(因此1指令)。

问题是指令创建的两个对象中的一个需要响应广播的两个消息(在链接函数中创建)中的多个广播消息(而不是单个消息)。

重申:

  • 对象1(如果!$ scope.ismini)

    • 需要回复消息" video-switch"
  • 对象2(如果是$ scope.ismini)

    • 需要回复消息" video-switch"
    • 还需要回复消息" calendar-state-changed"
    • 只需执行一次操作(无论调用哪一个)。



       return {
            restrict: "A",
            scope: {
                ismini: "="
            },
            link($scope, element: JQuery, attrs, ctrl) {
                $scope.$on("video-switch",() => {
                    setWordCloud(element, $scope.ismini);
                });

                if ($scope.ismini) {
                    $scope.$on("calendar-state-changed",() => {
                        setWordCloud(element, $scope.ismini);
                    });
                }

            }
        }




解决这个问题的最佳方法是什么?

1 个答案:

答案 0 :(得分:0)

使用逻辑创建一个函数并在两个位置使用它,而不是创建具有相同逻辑的2匿名并在调用时去除该函数。 含义在函数上放置一个计时器,如果另一个函数在超时发生之前尝试运行相同的函数,则重置计时器。

return {
    link($scope, element: JQuery, attrs, ctrl) {
        var processChange = function()
            setWordCloud(element, $scope.ismini);
        };
        var timeoutId;
        $scope.$on("video-switch", function() {
            $timeout.cancel(timeoutId);
            timeoutId = $timeout(processChange, 10, true);
        });

        if ($scope.ismini) {
            $scope.$on("calendar-state-changed", function() {
            $timeout.cancel(timeoutId);
            timeoutId = $timeout(processChange, 10, true);
        })

    }
}

这样做的一个缺点是会发生另一个$ digest循环,这可能会导致屏幕闪烁,但是如果两个函数都可以被调用而且你只想运行它们一次就没有其他选择。