Situation:
Here is an example of an Inputfield:
<ion-input class="item item-input">
<ion-label>Field</ion-label>
<input type="text" ng-disabled="someCondition" model="somemodel" />
<directive-element></directive-element>
</ion-input>
I am currently using a directive to replace the "directive-element" with a button that triggers a function on click. However, I am facing difficulty detecting whether the input is disabled or not. I have tried accessing it through element[0], but without success.
.directive('directiveElement', function () {
return {
restrict: 'AE',
replace: true,
template: function (element, attrs) {
var input = ?????.
if(input.disabled == false){
return "<button ng-click='myFunction()'></button>";
}else{
//Do not show the button
}
},
link: function (scope, element, attrs) {
scope.myFunction(){
//perform some logic
}
};
}
})
EDIT:
template: function (element, attrs) {
if (element[0].previousElementSibling != null && element[0].previousElementSibling.tagName == 'INPUT' && element[0].previousElementSibling.disabled == true) {
//this approach seems to work somewhat, but I still see the button...
}
},
I prefer not to use jQuery and would like to avoid Jqlite if possible.
Thank you!