[英]Strange behavior when monitoring a class on an Angular directive from inside that directive
我正在嘗試使用Angular指令監視某個元素上當前是否有特定的類。 切換添加或刪除該類的$ scope變量將觸發指令更新一些內容。
不過,我看到的是第一個切換沒有用,但隨后的切換有。 因此,更新不同步。 這是一個簡化的示例,該示例使用Monitor的解決方案對AngularJS指令中的元素進行類更改 。 這是怎么回事,如何獲得類更改以在指令內保持同步? 非常感謝!
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;}
更新雖然我還沒有弄清楚如何進行這項工作,但是我確實弄清楚了這個問題。 作為摘要循環的一部分,偽指令中的$ watch似乎在將類實際應用於元素本身之前觸發。 因此,指令的作用域變量與元素上實際不同步。
您可以嘗試僅將模型值傳遞給指令。 我刪除了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();
});
}
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.