Question

我在控制器顶部的代码上有一个$ rootScope。$。我注意到每次加载/调用这个控制器时，$ rootScope。$ on listener都会增加意味着它会在你访问控制器时无限期地添加和添加一个监听器。

当我通过$ rootScope调用它时我注意到了。$ $从另一个控制器发出，$ rootScope。$ on中的函数被执行了几次，即使它只是一次发射/广播。

function dynamicRectangles(){   
    var svgContainer = d3.select(".wall")
                                .append("svg")
                                .attr("translate",(0,wall.wall_height))
                                .attr("scale",(1,-1))
                                .attr("width", wall.wall_width)
                                .attr("height", wall.wall_height)
                                .style("border", "1px dashed black")
                                ;

        var drag = d3.behavior.drag()
            .on("drag", dragMove)



        var rect = svgContainer.selectAll(".draggableRectangle").data(art).enter()
                .append('rect')
                .attr('class', 'draggableRectangle')
                .attr('name', function(d) { return d.art_name; })
                 .attr('x', function(d) { return d.leftCorner.X; })
                 .attr('y', function(d) {return d.leftCorner.Y; })
                 .attr('width', function(d) { return d.art_width; })
                 .attr('height', function(d) { return d.art_height; })
                 .style("fill", "red")
                 .call(drag);



        function dragMove(d) {
             d3.select(this)
                 .attr("x", function () {return d3.event.x})
                 .attr("y", function () {return d3.event.y});
             var X = document.getElementById("displayInfo");
                 X.innerHTML = d3.event.x;
             var Y = document.getElementById("displayInfoY");
                 Y.innerHTML = d3.event.y;
             var name = document.getElementById("name");
                 name.innerHTML = d.art_name;
            // console.log(name, d3.event.x, d3.event.y)

         }
     }

    dynamicRectangles()

是否可以阻止它创建另一个侦听器实例，以便在已有侦听器时，它不会创建新的侦听器。

Answer 1

当您的控制器范围被销毁时，您需要取消注册事件监听器。

$on函数返回注销函数，该函数将在调用函数时删除侦听器。

所以你可以这样设置：

var deregister = $rootScope.$on('listen', function() {
    $scope.displayString();
});
$scope.$on('$destroy', deregister);

注意：这仅在控制器的范围实际被销毁时才有效（例如，在从DOM中删除的指令中或导航到不同的路径时）。如果这种情况没有发生，那么你需要找到一种只注册一次事件监听器的方法。

多次调用函数防止$ rootScope。$ on

1 个答案: