0

I have directive with following code

 app.directive('formControl', function () {
        return {
            restrict: 'C',
            link: function (scope, element, attrs) {

                // Add class filled to form-control's that have a value
                if (element.val()) {
                    element.parent().addClass('filled');

                }

                element.bind('blur', function (e) {
                    var input = angular.element(e.currentTarget);
                    if (input.val()) {
                        input.parent().addClass('filled');
                    } else {
                        input.parent().removeClass('filled');
                    }
                    input.parent().removeClass('active');
                }).bind('focus', function (e) {

                    var input = angular.element(e.currentTarget);
                    input.parent().addClass('active');
                }).bind('change',function(e) {
                   // Add class filled to form-control's that have a value
                    var input = angular.element(e.currentTarget);
                    input.parent().addClass('active');
                } );

            }
        };
    });

// Sample directive

    <div class="form-group">
       <label for="lastname" class="control-label">Phone number</label>
     <input type="text" class="form-control" name="phonenumber"  id="phonenumber" ng-model="user.phone_number" required maxlength="75">
   </div>

The purpose of this directive is very simple, add some css class to the target object based on few events and value status..

This directive will work fine if it hasnt any value. but if i have a value populated via model binding (not from keyboard ,via model binding). It wont work.

Ie. I want to execute code "input.parent().addClass('active');" when the directive/input field populated the value via model binding

I tried the change event but it is not working

4
  • You need to use directive ng-change="yourFunction()", whenever you change input value u get that function run and you may attach any action you want to it. And event is working just you need to have in your controllser $scope.yourfunction = function(){ sthhere } Jul 25, 2015 at 16:54
  • @PawełSmołka,I have more than 100 instances of this directive, so attaching the same function to every instance is tedious Jul 25, 2015 at 16:57
  • Have you considered simple scope.watch? instead of change it triggers disregarding who changed value Jul 25, 2015 at 17:22
  • not sure why you aren't using internal form validation object to drive this. Need to stop thinking about the dom first and let angular models drive the dom
    – charlietfl
    Jul 25, 2015 at 17:25

1 Answer 1

0

I think what you need is to somehow get hold of the binding set up by ng-model and react when the model changes. ng-model exposes its NgModelController, which in turn exposes the model value, which you can $watch. Something like this:

 app.directive('formControl', function () {
    return {
        restrict: 'C',
        require: '?ngModel',  // the (optional) ng-model on the same element
        link: function (scope, element, attrs, ngModel) {

            [...]

            if (ngModel) {
                scope.$watch(function() {
                    return ngModel.$modelValue;
                }, function(newValue, oldValue) {
                    input.parent().addClass('active');
                })
            }
        }
    };
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.