Interpretate directives for dynamic Html added from a $http response

Question

Directive defined to add numeric input

    app.directive('numericCheck', function () {
    return {
        link: function (scope, element, attr) {
            element.on('keypress', function (event) {  
                event = (event) ? event : window.event;
                if(/Firefox/.test(window.navigator.userAgent) && event.keyCode!=0) {
                    return true;
                }
                var charCode = (event.which) ? event.which : event.keyCode;
                if (charCode > 31 && charCode != 46 && charCode != 47 && charCode != 45 && (charCode < 48 || charCode > 57) || (charCode==45 && (event.target.selectionStart!=0 || event.target.value.indexOf('-')>=0)) || (charCode==46 && event.target.value.indexOf('.')>=0) || (charCode==47 && (event.target.selectionStart==0 || event.target.value.indexOf('/')>=0))) {
                    return false;
                }
                return true;
            });  
        }

    };
});

The below string is the response added to a div.

{"question":"Two identical charts have different parts shaded. Which one is greater - 0.02 or 0.04?<br><br><br><br><input type='text' id='b1' name='blank_1' class='num_blank' size='5' numeric-check> is the greater number."}

After adding the response to the HTML numeric-check, directive does not work and it allows us to enter all characters instead of only numeric values.

that is because you can't simply add new element to get the angular features, you need to re-compile it with angular, to get rid of that problem use this answer http://stackoverflow.com/a/16091279/3769965 — Ebin Manuval, Jan 21 '17 at 11:30

federico scamuzzi · Answer 1 · 2017-01-23T08:56:35.647

Have you tried to put something like:

app.directive('numericCheck', function () {
return {
    link: function (scope, element, attr) {
        element.on('keypress', function (event) { 
scope.$apply(function(){ 
            event = (event) ? event : window.event;
            if(/Firefox/.test(window.navigator.userAgent) && event.keyCode!=0) {
                return true;
            }
            var charCode = (event.which) ? event.which : event.keyCode;
            if (charCode > 31 && charCode != 46 && charCode != 47 && charCode != 45 && (charCode < 48 || charCode > 57) || (charCode==45 && (event.target.selectionStart!=0 || event.target.value.indexOf('-')>=0)) || (charCode==46 && event.target.value.indexOf('.')>=0) || (charCode==47 && (event.target.selectionStart==0 || event.target.value.indexOf('/')>=0))) {
                return false;
            }
            return true;
});
        });  
    }

};

Interpretate directives for dynamic Html added from a $http response

1 Answers1