Search code examples
angularjsng-tags-inputangular-formly

How to write formly template to set ng-tags-input's auto-complete source?


I'm trying to write a custom formly template to use ng-tags-input:

angular.module('myMod').run(function(formlyConfig) {
    formlyConfig.setType({
        name:'tag',
        template:"<label class='control-label' ng-if='to.label'>{{to.label}}</label>" +
        "<tags-input ng-model='model[options.key]' ng-attr-placeholder='{{to.placeholder}}'>" +
        "<auto-complete source='{{to.tags}}'></auto-complete></tags-input>"
                        ^^^^^^^^^^^^^^^^^^^
    });
})

where to.tags refers to the formly template's templateOptions:

            templateOptions: {
                tags: 'dataModel.getProductTags()'

Using double-braces in this context causes a $parse error. How can I fill that source attribute indirectly from the content of to.tags?

I've also tried ng-attr-source='to.tags', with no luck.

I suspect I'm just not thinking of something obvious. If easy and sensible, please include relevant references.


Solution

  • The solution was to put the function, not the name of the function, in templateOptions, like so:

                templateOptions: {
                    tags: dataModel.getProductTags
    

    and in the template, just invoke it:

    <auto-complete source='to.tags()'>
    

    This requires that the function itself must be accessible from the formly template, but in my case that's not a problem.