0

I have the following directive:

.directive('phonenumberDirective', ['$filter', function($filter) {        

    function link(scope, element, attributes) {


        scope.inputValue = scope.phonenumberModel;

        scope.$watch('inputValue', function(value, oldValue) {

            value = String(value);
            var number = value.replace(/[^0-9]+/g, '');
            scope.phonenumberModel = number;
            scope.inputValue = $filter('phonenumber')(number);
        });
    }

    return {
        link: link,
        restrict: 'E',            
        scope: {
            phonenumberPlaceholder: '=placeholder',
            phonenumberModel: '=model',
            change: '=change',                
        },
        template: '<input ng-model="inputValue" type="tel" class="form-control" placeholder="{{phonenumberPlaceholder}}" title="Informe seu celular">',
    };
}])

.filter('phonenumber', function() {       

    return function (number) {            
        if (!number) { return ''; }

        number = String(number);

        var formattedNumber = number; 

        var c = '';

        if (number.length <= 10){            

            var area = number.substring(0,2);
            var front = number.substring(2, 6);
            var end = number.substring(6, 11);
        } else {

            var area = number.substring(0,2);
            var front = number.substring(2, 7);
            var end = number.substring(7, 11);
        }

        if (front) {
            formattedNumber = (c + "(" + area + ") " + front);  
        }
        if (end) {
            formattedNumber += ("-" + end);
        }
        return formattedNumber;
    };
});    

// And I have my call for this directive as: 
<phonenumber-directive placeholder="phone_placeholder" ng-show="show_phone" model="sms" change="updateContact(sms)"></phonenumber-directive>

Everything works as it suppose to be, except I can't clean the directive value. In my post method I have tried: $scope.sms = null; and $scope.sms = ''; $scope.inputValue = null; and $scope.inputValue = '';

But nothing worked.

softvar
  • 17,917
  • 12
  • 55
  • 76
Herbert Smith
  • 33
  • 4
  • Look into using 'çontrollerAs' syntax. This is a better way to go about things, and will solve your problem as well as a lot of other scope confusion. Generally angular is going away from putting things directly on the scope. – GBa Dec 14 '14 at 20:22

1 Answers1

2

Your directive has its own scope (because you defined it), its a different scope from a controllers scope (aka $scope). So $scope.inputValue doesnt reffer to anything in the controller.

There are ways to do what you want to do (like binding it through an aditional attribute for example), but I wouldnt recommend it.

A better way to solve your issue would be to define the input and its ng-model in the view and only add the directive as an attribute to the input.

View:

<input ng-model="inputValue" phonenumber-directive />
Joe Samanek
  • 1,644
  • 12
  • 16
  • Thanks for the answer @joe-samanek, Now somethings make more sense to me, I will try to modify the directive and adapt so I can use it as you mention. Once again trank you very much! – Herbert Smith Dec 15 '14 at 15:59