AngularJS Directive - Template Select Not Updating Ng-Model

Question

I have two directives in my module. The first is from https://github.com/banafederico/angularjs-country-select. I used it as a model for the second. The two directives represent input fields, but the second one is not storing a value. The link function is not updating the ng-model value.

link: function(scope, elem, attrs) {

    if (!!attrs.ngModel) {
        var assignDivision = $parse(attrs.ngModel).assign;

        elem.bind('change', function(e) {
            assignDivision(elem.val());
        });

        scope.$watch(attrs.ngModel, function(division) {
            elem.val(division);
        });
    }
}

In my ide (netbeans) the 2nd (dependent) drop-down does not display the selected value in the drop-down or update the model. In this fiddle (http://jsfiddle.net/676mp/), the display updates, but the model does not. I am unsure how to update the value of the model to the selected value.

I don't think it will be a good fit in this particular case. Thank you for providing this link. — C1pher
– C1pher, Commented Nov 20, 2013 at 14:24

m.e.conroy · Accepted Answer · 2013-11-19 21:06:47Z

1

Its because in the second directive you defined scope: {...} when passing in the country value. This creates an isolate scope in the directive and thus ng-model on the element doesn't really work, you need to create a two way binding to the parent variable in the directive's new isolate scope

http://jsfiddle.net/676mp/2/

scope: {
    country: '@',
    myDivision: '=division'
}

And then in the HTML

<division-select division="myDivision" country="{{myCountry}}"></division-select>

EDIT: Also note that in the fiddle I changed your template for the directive to include its own ng-model for its own scope

edited Nov 19, 2013 at 21:06

answered Nov 19, 2013 at 20:59

m.e.conroy

3,53828 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

C1pher Over a year ago

Thank you so much. This project has been a thorn in my side for too long.

Collectives™ on Stack Overflow

AngularJS Directive - Template Select Not Updating Ng-Model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related