I am using ngTagsInput and would like to perform some validation on my models as they change. Here is a Plunker of what I'd like to achieve.
Markup:
<div ng-repeat="field in fields">
<tags-input ng-model="field.selectedData" max-tags="{{field.maxTags}}" enforce-max-tags placeholder="{{option.placeholder}}">
<auto-complete source="updateAutocomplete($query)"></auto-complete>
</tags-input>
</div>
Fields / models:
$scope.fields = [
{
name: 'assay',
placeholder: 'Select one assay...',
maxTags: 1,
selectedData: [] // These are the models
},
{
name: 'cellLines',
placeholder: 'Select cell line(s)...',
maxTags: 5,
selectedData: []
},
...
]
Finally, my enforceMaxTags
directive:
.directive('enforceMaxTags', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$parsers.push(function(value) {
console.log('link called');
});
}
};
})
The enforceMaxTags
directive is being compiled, but the link
function is not called even when the models change. The data binding does appear to work, though, because if I console.log
the selectedData
on form submission, it is filled with the correct objects. What am I missing?
Thanks in advance.