Angular ng-class 在 1.3.0 中的应用与 1.2.25 不同

Question

我有一个在 1.2.25 版本之上构建的相对较大的 Angular 应用程序。在我最近升级到 1.3.0 的过程中，我发现只有一个主要问题在对 DOM 进行 html 类更改时似乎发生了变化。

在这个 jsfiddle 示例中，请注意获取 DOM 元素大小的手表，它基于另一个指令更改的类： http://jsfiddle.net/travisgosselin/sx7jponj/1/ 此示例使用 Angular 1.2.25。

 scope.$watch(function () {
        return {
            width: element.closest('.checkSize').width(),
            height: element.closest('.checkSize').height()
        };
    }, function (size) {
        scope.height = size.height;
    }, true);

另一个完全相同但使用 Angular 1.3.0 的 jsfiddle，您会注意到 watch 不会触发更新，因为在 $watch 发生之后似乎应用了该类，因此不会更新元素的大小. http://jsfiddle.net/travisgosselin/t80segou/1/

scope.$watch(function () {
        return {
            width: element.closest('.checkSize').width(),
            height: element.closest('.checkSize').height()
        };
    }, function (size) {
        scope.height = size.height;
    }, true);

这背后的想法是允许我的一个指令独立于另一个组件中发生的事情来调整大小。

在 Angular 更改日志中，我能看到的唯一轻微相关的更改是与 ngAnimate 相关的更改。请参阅 1.3.0-rc.5 下的重大更改： $animate CSS 类 API 将始终将更改推迟到下一个摘要结束。这允许 ngAnimate 将在短时间内发生的类更改合并为 1 或 2 次 DOM 写入，而不是多次。这可以防止 IE 等浏览器出现卡顿，通常是一件好事。 如果你发现你的类没有被立即应用，一定要调用 $digest()。

知道如何最好地修改此场景以触发 dom 元素大小的手表吗？在这一点上，我唯一的选择是使用从许多不同位置触发的一系列事件，这些事件会强制调整大小（发布/订阅）。

Answer 1

如果您可以在您的应用程序中包含ngAnimate，有一种方法。

$animate.enabled(false, element) -- 通过传递应用了ng-class 的元素引用，在changeclass 指令内触发此方法

app.directive("changeClass", function ($animate) {
    return {
        restrict: 'A',
        scope: true,
        template: '<div><div ng-click="changeSize()">Change</div><div  ng-class="{ \'biggerSize\': biggerSize }" class="smallerSize checkSize"><div read-class></div></div></div>',
        replace: true,
        link: function (scope, element, attrs) {
            $animate.enabled(false, angular.element(element.children()[1]));
            scope.biggerSize = false;
            scope.changeSize = function () {
                scope.biggerSize = !scope.biggerSize;
            };
        }
    };
});

Working Fiddle