从指令中监视Angular指令中的类时出现奇怪的行为

Question

我想通过Angular指令监视某个特定的类当前是否在某个元素上。切换添加或删除该类的$ scope变量会触发指令更新一些内容。

但我所看到的是，第一个切换不需要，但随后的切换不会。更新因此不同步。这里有一个简化的例子，使用Monitor for class changing on element in AngularJS directive的解决方案。这里发生了什么，以及如何让类更改在指令内保持同步？非常感谢！

CodePen example

HTML：

<div ng-app="myApp" ng-controller="myCtrl"> 
    <label> 
    <input type="checkbox" ng-model="compact" /> Compactify 
    </label> 
    <div>Compactify is set to: {{compact}}</div> 
    <div firefly class="crewList" ng-class="{compact: compact}"></div> 
</div> 

JS：

var app = angular.module('myApp', []); 

app.controller('myCtrl', ['$scope', function($scope) { 
    $scope.compact = false; 
}]); 

app.directive('firefly', [function() { 
    return { 
    restrict: 'AE', 
    template: '<ul ng-class="{compact: compacted}"><li>Capt. Mal</li><li>Zoe</li><li>Wash</li><li>Kaylee</li><li>Book</li><li>Inara</li><li>Jayne</li><li>Simon</li><li>Spoilers, sweetie!</li></ul>', 
    link: function(scope, element, attrs) { 
     scope.insideCompactor = function() { 
     scope.compacted = element.hasClass('compact'); 
     }; 
     scope.insideCompactor(); 
     scope.$watch(function() {return element.attr('class');}, function(newValue) { 
     scope.insideCompactor(); 
     }); 
    } 
    }; 
}]); 

CSS：

.crewList {font-size: 2rem;} 
.crewList UL.compact {font-size: 1rem;} 

UPDA TE 虽然我还没有想出如何使这项工作，我确实弄清楚了更多关于这个问题。作为摘要循环的一部分，指令中的$ watch似乎在之前触发，该类实际上应用于元素本身。因此，指令的作用域变量与元素上的实际内容不同步。

Answer 1

Working Code Pen

你可以尝试只模型值传递给该指令。我删除了ng-class指令并将其替换为class-model属性以将数据传递给指令。

<div firefly class="crewList" class-model="compact"></div> 

则该值可以在指令的范围内引用，并可以观看的，而不是直接检查，如果该元素的类。

app.directive('firefly', [function() { 
    return { 
    restrict: 'AE', 
    template: '<ul ng-class="{compact: compacted}"><li>Capt. Mal</li><li>Zoe</li><li>Wash</li><li>Kaylee</li><li>Book</li><li>Inara</li><li>Jayne</li><li>Simon</li><li>Spoilers, sweetie!</li></ul>', 
    scope: { 
     classModel: '=' 
    }, 
    link: function(scope, element, attrs) { 
     scope.insideCompactor = function() { 
     scope.compacted = scope.classModel; 
     }; 
     scope.insideCompactor(); 
     scope.$watch('classModel', function(newValue) { 
     scope.insideCompactor(); 
     }); 
    } 
    }; 
}]);