ngTagsInput - Enable the onTagAdding feature

Question

ngTagsInput - Enable the onTagAdding feature

I've been attempting to establish a default function for the onTagAdding callback using the tagsInputConfig provider, but without any success.

tagsInputConfig.setDefaults('tagsInput', {
    placeholder: 'Search',
    maxTags: 10,
    minLength: 5,
    maxLength: 40,
    replaceSpacesWithDashes: false,
    onTagAdding: function (x,y,z) {
        debugger; // breakpoint is never called
    }
});

Although all the other default options are correctly configured, the callbacks remain ineffective. On the contrary, it works when set as a property:

<tags-input on-tag-adding="onTagAdding($tag)" ng-model="search"></tags-input>

Is there a method available to establish a default function for this particular callback?

javascript angularjs ng-tags-input

Answer 1

Answer №1

If you want to set any function from your own scope as the callback, you can follow this example

# sample.html
<div ng-controller="MyController">
    <tags-input on-tag-adding="myCustomFunction($tag)" ng-model="search"></tags-input>
</div>

Then in your JavaScript file

angular.module('myModule').controller('MyController', function($scope) {
    $scope.myCustomFunction = function($tag) {
        console.log($tag);
        return false;
    };
});

I hope this explanation proves useful!

Answer 2

If you want to set any function from your own scope as the callback, you can follow this example

# sample.html
<div ng-controller="MyController">
    <tags-input on-tag-adding="myCustomFunction($tag)" ng-model="search"></tags-input>
</div>

Then in your JavaScript file

angular.module('myModule').controller('MyController', function($scope) {
    $scope.myCustomFunction = function($tag) {
        console.log($tag);
        return false;
    };
});

I hope this explanation proves useful!

Answer 3

Answer №2

After reviewing the documentation (tags-input.js && configuration.js), it seems that the onTagAdding callback cannot be specified as a default.

The source code provides a list of available options (Note: keys in the object's fourth argument are default names):

tagsInputConfig.load('tagsInput', $scope, $attrs, {
                template: [String, 'ngTagsInput/tag-item.html'],
                type: [String, 'text', validateType],
                placeholder: [String, 'Add a tag'],
                ...
            });

tl;dr

It is not possible to set a default function for the onTagAdding callback, but you could consider submitting an issue on their github!

Answer 4

After reviewing the documentation (tags-input.js && configuration.js), it seems that the onTagAdding callback cannot be specified as a default.

The source code provides a list of available options (Note: keys in the object's fourth argument are default names):

tagsInputConfig.load('tagsInput', $scope, $attrs, {
                template: [String, 'ngTagsInput/tag-item.html'],
                type: [String, 'text', validateType],
                placeholder: [String, 'Add a tag'],
                ...
            });

ngTagsInput - Enable the onTagAdding feature

Answer №1

Answer №2

tl;dr

It is not possible to set a default function for the onTagAdding callback, but you could consider submitting an issue on their github!

Similar questions

Formatting in Cx framework: Configuring right alignment and decimal precision on NumberField

Web API 2 indicates the 405 Method Not Allowed error

Delay in displaying image on bootstrap slider

Click on the following link to view your screen resolution:

When a function inside React uses this.props, it won't trigger the corresponding function

When node.js v6.11.2 is installed on Windows 7, it does not include the correct npm version

Guide to retrieving a JSONArray using JavascriptInterface

Information in a Service is reset upon refreshing the page

Angular JS: Automatically toggle the visibility of a div on a panel click event

When attempting to log out of Keycloak, a TypeError occurs in the front-end application stating that it cannot read properties of undefined related to the action of logging out

Concentrate on the HTML element once it becomes active

Jquery Banner Fade In animation malfunctioning

Can you explain the function of this.$nextTick()?

What is the best way to move between websites or pages without having to reload the current page using a selector?

When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

Exploring the integration of Firebase with Next.js using getServerSideProps

Utilize jQuery to enclose nested elements within a parent element

Having issues with json_decode not functioning correctly after using JSON stringify

Error: The PHP contact form is displaying field names instead of the actual values being entered

Which file directory should I specify when using ng-include?