watch function inside directive is not firing

Question

I have a directive in angular as follows:

angular
    .module('accountApp')
    .directive('matchTo', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {

                // var attributes = scope.$eval(attrs.matchTo);

                ctrl.$validators.matchTo = function(modelValue) {

                    var attributes = scope.$eval(attrs.matchTo);

                    if(attributes.unequal == undefined) {
                        attributes.unequal = false;
                    }

                    console.log(modelValue);
                    console.log(attributes.matchString);
                    console.log(attributes.unequal);

                    if(attributes.unequal) {
                        if(attributes.matchString == undefined || attributes.matchString == null) {
                            return true;
                        } else {
                            return modelValue != attributes.matchString;
                        }
                    } else {
                        if(attributes.matchString == undefined || attributes.matchString == null) {
                            return false;
                        } else {
                            return modelValue == attributes.matchString;
                        }                        
                    }
                }

                scope.$watch(attrs.matchString, function() {
                    ctrl.$validate();
                    console.log('watch fired');
                });

            }
        }
    });

Here is my html:

<input type="text" id="name" name="name" class="form-control form-input" ng-model="creditDebit.name"
        ng-disabled="isReadOnly" autocomplete="off"
        required 
        ng-required-err-type="requiredCreditDebit" />

<input type="text" id="code" name="code" class="form-control form-input" ng-model="creditDebit.code"
        ng-disabled="isReadOnly" autocomplete="off"
        required 
        match-to="{ matchString: creditDebit.name, unequal: true}"
        ng-required-err-type="requiredCreditDebitCode"
        ng-matchTo-err-type="unMatchNameAndCode" />

Watch function fires only when page is reloaded. But I expect it to fire when value changes.

@Vishal, please see the solution [in my answer](http://stackoverflow.com/a/42745030/2545680) — Max Koretskyi, Mar 12 '17 at 07:50

Abdullah Al Noman · Answer 1 · 2017-03-12T09:48:38.523

1

You can use .

scope.$watch(attrs.matchString, function() {
                ctrl.$validate();
                console.log('watch fired');
   },true);

or try this now

element.bind('keypress', function(event) {
              if(event.keyCode === 32) {
                event.preventDefault();
              }
            });

edited Mar 12 '17 at 09:48

answered Mar 12 '17 at 07:44

Abdullah Al Noman

2,817
4
20
35

did you see the ,true); at the end are you serious ?? @Vishal those two look same to you ?? – Abdullah Al Noman Mar 12 '17 at 09:11
Sorry, I noticed it right now. But I can't reverse my vote because its locked. – Vishal Mar 12 '17 at 09:43

Max Koretskyi · Accepted Answer · 2017-03-12T07:55:34.660

1

There is no need to watch attributes, because it's not attributes that changes, but rather matchString property on the scope. So I would do it like this:

var matchTo = $parse(attrs.matchTo);
scope.$watch(function () {
    return matchTo(scope).matchString;
}, function (value) {
    console.log(value);
});

See this plunker for details.

edited Mar 12 '17 at 07:55

answered Mar 12 '17 at 07:47

Max Koretskyi

101,079
60
333
488

Sorry, my mistake. It works fine. Thank you for the answer and your time. – Vishal Mar 12 '17 at 08:14

watch function inside directive is not firing

2 Answers2