I am trying to create a directive in which I need to format a value according to a filter which may vary (depending on the field, it could be "number:2", "date"... or whatever).
So I want to define the filter when I use the directive in the markup. Scenario is depicted through this plunker: http://embed.plnkr.co/N2zKITFpUQMxmylAAGlt/preview
So far filter is not applied or errors are raised.
What's the right way to implement it? Thanx
Here's one way to do it using template:function(elem,attrs)
app.directive('editableField', function() {
return {
restrict: 'A',
replace: true,
template:function(elem,attrs) {
return '<div>' +
'<input ng-model="editableModel" />' +
'<div class="output">{{editableModel|'+attrs.editableFilter+' }}</div>' +
'</div>';
},
/* if using in a form....I would remove the isolated scope*/
scope: {
editableModel: '='
},
controller: function($scope) {},
link: function($scope, $element, $attrs, $filter) {
var input = $element.find('input');
input.bind('click', function () {
this.select();
});
}
};
});
Here is a working Plunkr:
http://plnkr.co/edit/nZgah7PtGRVMWBgKu7V8?p=preview
There are two examples, one that formats it as a float, and one that supposedly formats it as a date. The formatting itself I didn't do as it is fairly trivial.
