Home angular directive event listener missing events
Reply: 0

angular directive event listener missing events

Sonic Soul
1#
Sonic Soul Published in 2018-02-13 21:59:26Z

I have a weird issue where my directive works, but on some keys, scope.watch and element.bind don't fire!

if i press 1.2222222222 my directive will limit my input to 1.22, however in this specific case, it doesn't always fire on 1.222 ! you will see in some cases it will not fire on 1.222 and catch next time i press 2 (at 1.2222)

it works more or less like this:

// input: 1
inputDecimalsDir.ts:45 watch..  vm.testNumber 1
// input: 1.
inputDecimalsDir.ts:45 watch..  vm.testNumber 1.
// input: 1.1
inputDecimalsDir.ts:45 watch..  vm.testNumber 1.1
// input: 1.2
inputDecimalsDir.ts:45 watch..  vm.testNumber 1.12
// input: 1.222  <-- events not fired 
// input: 1.2222 <-- events fired changes input to 1.22
inputDecimalsDir.ts:45 watch..  vm.testNumber 1.122

code

//html
<input ng-model="vm.testNumber" tb-decimal-places="2" />
...

//js
angular
    .module('my.app')
    .controller("my.app.InputDecimalsCtrl", InputDecimalsCtrl)
    .directive('tbDecimalPlaces', ['$parse', function ($parse: ng.IParseService) {
        return {
            restrict: 'A',
            require: 'ngModel',
            controller: 'my.app.InputDecimalsCtrl',
            controllerAs: 'vm',
            link: (
                scope: ng.IScope,
                element: ng.IRootElementService,
                attr: ng.IAttributes,
                vm: InputDecimalsCtrl) => {

                scope.$watch(() => scope.model, (newVal, oldVal) => {
                    console.log('watch.. ', attr.ngModel, newVal);
                    if (!newVal) return;
                    vm.decimals = +attr.tbDecimalPlaces;
                    var val = newVal;
                    var dCount = getDecimalCount(val);
                    if (dCount > vm.decimals && val.length)
                        element.val(val.substr(0, val.length - (dCount - vm.decimals)));
                });
                // test regular bind! also doesn't fire!!!! 
                element.bind('propertychange change click keyup input paste', evt => {
                    console.log('element bind', scope.model);
                });

                function getDecimalCount(val: string): number {
                    var match = ('' + val).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
                    if (!match) { return 0; }
                    return Math.max(
                        0,
                        // Number of digits right of decimal point.
                        (match[1] ? match[1].length : 0)
                        // Adjust for scientific notation.
                        - (match[2] ? +match[2] : 0));
                }
            },
            scope: {
                model: '=ngModel'
            },
            bindToController: {
            }

        };
    }])

if i keep pressing 1.12121212121212 it works correctly (no events are missed!!)

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.321748 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO