改变ngClass后，AngularJS执行范围功能

Question

我在AngularJS项目中进行了以下设置：

控制器

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;
}

网站的特定部分仅在调用控制器方法时显示，否则显示opacity: 0。控制器将boolean属性设置为true（这将触发元素出现）。但是，在$scope.showCharts();方法中，element's width始终为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
    }
);