AngularJS砌体重新加载事件不起作用答案

【问题标题】：AngularJS masonry reload event not workingAngularJS砌体重新加载事件不起作用
【发布时间】：2014-01-11 22:44:10
【问题描述】：

当我的控制器范围的过滤器使用以下代码更改时，我正在尝试更新砌体容器。

$scope.toggleCardVisibility = function(cardType) {
    $scope.filters[cardType] = false === $scope.filters[cardType];

    $scope.$broadcast('masonry.reload');        
};

我的 HTML 中连接到范围的元素如下所示：

<div ng-show="$parent.filters.heart" class="card-wrapper">
    ...
</div>

toggleCardVisibility 在点击按钮时被调用：

<button type="button" cardType="profileUpdate" class="btn btn-default selected" ng-click="toggleCardVisibility('profileUpdate');">
    ...
</button>

问题是这没有按预期工作。调用toggleCardVisibility 函数时将显示/隐藏元素，但不会更新砌体容器。我认为这可能是时间问题，所以我尝试将第一个代码 sn-p 与以下代码交换：

$scope.toggleCardVisibility = function(cardType) {
    $scope.filters[cardType] = false === $scope.filters[cardType];

    window.setTimeout(function() {
        $scope.$broadcast('masonry.reload');
    }, 1);
};

现在 - 超时为 1ms 的 sn-p 工作起来非常烦人。有人知道如何解决这个问题吗？

masonry.reload 事件的监听器可以在供应商https://github.com/passy/angular-masonry/blob/master/angular-masonry.js 中找到。

【问题讨论】：

你能提供一个plunker吗？我看不到你在哪里打电话给toggleCardVisibility 或在哪里收听'masonry.reload' 事件。
不幸的是，我的 Angular 应用程序有一些依赖项，我无法在 plunkr 中正确设置。但我编辑了我的帖子，以便您更好地了解正在发生的事情。

标签： javascript angularjs jquery-masonry

【解决方案1】：

为了使用$broadcast 将事件向下调度到所有子范围，您必须通知已注册的 $rootScope.Scope 侦听器。

$scope.$broadcast('masonry.reload');

应该是：

$rootScope.$broadcast('masonry.reload');

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

【讨论】：