After thinking I had successfully solved this issue, it turns out I was mistaken. I developed a directive to enable me to clear a text input field. Essentially, when you begin typing into the input box, an "X" icon appears on the right side of the textbox. Clicking on this icon erases the model. Below is the code for my directive.
(function() {
"use strict";
var app = angular.module("myApp");
app.directive("clearInput", ['$compile', function ($compile) {
return {
require: 'ngModel',
scope: {},
link: function (scope, element, attrs, ngModel) {
if (element.next().length) {
element.next().insertBefore(element);
}
var tpl = '<span> <i class="icon ion-close-circled placeholder-icon clear-element" ng-show="show" ></i></span>';
var clear = angular.element(tpl);
scope.setValue = function (val) {
ngModel.$setViewValue(val);
ngModel.$render();
scope.$apply();
};
clear.on('click',
function () {
scope.setValue(null);
});
element.bind('blur', function () { scope.setValue(ngModel.$modelValue); });
scope.$watch(function () {
return ngModel.$modelValue;
}, function (val) {
scope.show = val === null ? null : val.length > 0;
});
$compile(clear)(scope);
element.after(clear);
}
}
}]);
})();
When I initially created and tested the directive using Plunker, I unknowingly included a very old version of Ionic (1.0.0-beta.5). Surprisingly, the directive worked perfectly under this circumstance.
http://plnkr.co/edit/5rGzl1?p=info
Upon transferring the directive to my application environment, I encountered an issue where the click event I bind doesn't trigger. To troubleshoot, I forked the Plunker and utilized an updated version of Ionic (1.0.1). In this case, the click event did not work (though interestingly enough, the double-click did).
http://plnkr.co/edit/DH6jjG?p=info
If anyone has insights on how to resolve this matter, your assistance would be greatly appreciated! Thank you!