0

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.

jds
  • 7,910
  • 11
  • 63
  • 101

0 Answers0