I have block of AngularJS code that looks like the following:
<ion-list can-swipe="true">
<ion-item ng-repeat="item in items" simplify-item>
<div class="row" style="background-color:orange;">
Hello
</div>
</ion-item>
</ion-list>
The directives come from the ionic framework. Still, I am trying to add my own directive to this. I want to set a CSS property via an attribute called "simplify-item". My directive to make this happen looks like this:
myApp.directive('simplifyItem', function() {
return {
restrict:'A',
link: function(element) {
console.log('linking element');
if (element === null) {
console.log('element is null');
} else {
var result = element.hasClass('item-complex');
if (result === null) {
console.log('result is null.');
} else {
console.log('Sweet!');
}
}
}
};
});
When the line var result = element.hasClass('item-complex');
gets executed, I get an exception. The exception says:
undefined is not a function
I don't understand why I can't do this. What am I doing wrong?
try like this
myApp.directive('simplifyItem', function() {
return {
restrict:'A',
link: function(scope , iElement, iAttrs) {
var element = iElement;
console.log('linking element');
if (element === null) {
console.log('element is null');
} else {
var result = element.hasClass('item-complex');
if (result === null) {
console.log('result is null.');
} else {
console.log('Sweet!');
}
}
}
};
});
explanation from angular docs
Directives that want to modify the DOM typically use the link option. link takes a function with the following signature, function link(scope, element, attrs) { ... } where:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.