javascript - AngularJS 在 ngClass 更改后执行作用域函数

Question

我的 AngularJS 元素中有以下设置:

Controller

app.controller('Controller', function ($scope, $timeout, someService) {

    $scope.showItem = false;

    $scope.show = function() {
        $scope.showItem = true;
        $scope.showCharts();
    };

    $scope.showCharts = function() {
        // this code needs the HTML elements to have a width and height
        console.log($('#chartContainer').width()); // prints always 0
    };
}

查看

<div id="details" ng-class="{visible: showItem}">
    <div id="chartContainer"></div>
</div>

CSS

#details {
    opacity: 0;
    transition: all .5s ease .25s;
}

#details.visible {
    opacity: 1;
}

网站的特定部分仅在调用 Controller 方法时显示，否则它具有opacity: 0。 Controller 将 boolean 属性设置为 true(这将触发元素出现)。但是，在 $scope.showCharts(); 方法中，元素的宽度 始终为 0。唯一对我有用的是使用超时:

$timeout(function() {
    $scope.showCharts(); // the width will be set now
}, 150);

当然，这是一个糟糕的解决方案。有谁知道一旦类发生变化并且 DOM 准备就绪，我如何调用作用域函数？

Answer 1

您可以在图表的宽度上放置一个$watch 并在它发生变化时执行您需要执行的任何操作。例如像这样的东西。

$scope.$watch(
    function() {
        return jQuery("#chartContainer").width();
    },
    function() {
        // Do what you want when the size changes
    }
);