Question

在我的应用程序中，我使用带有窗口大小调整事件监听器的自定义指令：

link: function(scope, elem, attrs) {
    angular.element($window).bind('resize', function() {
        // viewId is a unique reference to the view in which the directive lives
        console.log(scope.viewId);
    });
}

在我的每个视图中插入此指令一次或多次。

让我感到困惑的是，为什么函数不仅针对活动视图执行，还针对不活动视图执行。一旦我访问了多个视图，就会发生这种情况。

让我更加困惑的是，在我多次访问同一个视图后，为什么在同一视图中多次调用该函数。

在我看来，旧的指令范围不会被破坏，而是保持活跃状态，并在旧的范围之外创建一个新的范围。

我能做些什么来阻止这种行为吗？

根据Renan Lopes Ferreira提供的答案提供工作解决方案的代码片段（我使用LoDash _.debounce来防止过于频繁地调用该函数）：

windowResize = _.debounce(function () {
    // My logic
    $scope.$apply();
}, 150);

// Attach debounced function to the window.resize event listener
angular.element($window).on('resize', windowResize);

// Remove the function when the directive is destroyed
$scope.$on('$destroy', function () {
    angular.element($window).off('resize', windowResize);
});

Answer 1

您的指令被销毁时需要删除侦听器。类似的东西：

SELECT * FROM (
    SELECT * FROM (
        SELECT tiles.*,users.first_name,users.last_name, users.mosaicname,users.country,users.city,users.state,users.profile_image,COUNT(tile_appreciations.tile_id) AS appreciation_count 
        FROM tiles LEFT JOIN tile_appreciations ON tile_appreciations.tile_id = tiles.id INNER JOIN users ON users.id = tiles.user_id LEFT JOIN user_settings ON user_settings.user_id = tiles.user_id 
        WHERE tiles.view_mode = 'PB' AND users.status = 'Y' AND tiles.moved_stat = '1' AND user_settings.public_profile = 'Y' 
        GROUP BY tiles.id 
        ORDER BY appreciation_count DESC LIMIT 200
    ) as best200
    ORDER BY RAND() 
    LIMIT 9
) UNION (
    SELECT tiles.*,users.first_name,users.last_name,users.mosaicname,users.country,users.city,users.state,users.profile_image,COUNT(tile_appreciations.tile_id) AS appreciation_count 
    FROM tiles LEFT JOIN tile_appreciations ON tile_appreciations.tile_id = tiles.id INNER JOIN users ON users.id = tiles.user_id LEFT JOIN user_settings ON user_settings.user_id = tiles.user_id 
    WHERE tiles.view_mode = 'PB' AND users.status = 'Y' AND tiles.moved_stat = '1' AND user_settings.public_profile = 'Y' 
    GROUP BY tiles.id 
    ORDER BY RAND() 
    LIMIT 25
)
LIMIT 25;

Answer 2

在指令链接函数中，对于每个具有相同名称angular found的指令，都会调用一次。

因此，如果您的视图中有两倍的指令，它将执行链接功能两次。

如果您只想运行一次功能，只需在“编译”功能中执行操作。

查看本教程，他很棒：http://www.sitepoint.com/practical-guide-angularjs-directives/

事件侦听器从同一指令多次触发

2 个答案: