[英]Angular directive class not being applied
Using element.addClass doesn't add the class onto the element. 使用element.addClass不会将类添加到元素上。 If I remove
class="progress-radial progress-{{percentage}}"
from the template it does however work. 如果我从模板中删除了
class="progress-radial progress-{{percentage}}"
,它确实可以正常工作。
Not sure what exactly is going wrong as the code fires correctly, just doesn't seem to want to add a new class if the attribute already exists. 不确定代码正确触发时到底出了什么问题,如果属性已经存在,似乎不想添加新类。
angular.module(moduleName, [])
.directive('npProgress', function() {
return {
restrict: 'AE',
replace: true,
scope: {
percentage: '@'
},
template: '<div class="progress-radial progress-{{percentage}}">' +
'<div class="overlay">{{percentage}}</div>' +
'</div>',
link: function(scope, element, attrs) {
if ( scope.percentage > 50 ) {
element.addClass('progress-radial--positive');
}
}
}
});
Replace the interpolated class with the ng-class
directive. 将插入的类替换为
ng-class
指令。
ERRONEOUS
错误
//AVOID interpolated class template: '<div class="progress-radial progress-{{percentage}}">' + '<div class="overlay">{{percentage}}</div>' + '</div>',
USE ng-class="'progress-'+percentage"
: 使用
ng-class="'progress-'+percentage"
:
template: '<div class="progress-radial" ' +
'ng-class="' +"'progress-'" + '+percentage">' +
'<div class="overlay">{{percentage}}</div>' +
'</div>',
The binding of the interpolated string was fighting the changes by the custom directive. 内插字符串的绑定正在通过自定义指令抵抗更改。
This is a Known Issue 这是一个已知的问题
Known Issues
已知的问题
Dynamically changing an interpolated value
动态更改插值
You should avoid dynamically changing the content of an interpolated string (eg attribute value or text node).
您应该避免动态更改插值字符串的内容(例如,属性值或文本节点)。 Your changes are likely to be overwriten, when the original string gets evaluated.
当评估原始字符串时,您的更改可能会被覆盖。
-- AngularJS Developer Guide -- Interpolation -- Known Issues -AngularJS开发人员指南-插值-已知问题
Try adding the class using angular.element
尝试使用
angular.element
添加类
Here is the Documentation. 这是文档。
Also use parseInt
on scope.percentage
since you are sending string percentage
using @
binding. 也要在
scope.percentage
上使用parseInt
,因为您是使用@
绑定发送string percentage
。
parseInt converts the string to integer and then compares. parseInt将字符串转换为整数,然后进行比较。
angular.module(moduleName, [])
.directive('npProgress', function() {
return {
restrict: 'AE',
replace: true,
scope: {
percentage: '@'
},
template: '<div class="progress-radial progress-{{percentage}}">' +
'<div class="overlay">{{percentage}}</div>' +
'</div>',
link: function(scope, element, attrs) {
if ( parseInt(scope.percentage) > 50 ) {
angular.element(element).addClass('progress-radial--positive');
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.