CODEWITHSUNDEEP
angularjsdrop-down-menuangularjs-directive
C1pher
C1pher

Reputation: 1972

AngularJS Directive - Template Select Not Updating Ng-Model

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.

Upvotes: 1

Views: 1282

Answers (1)

m.e.conroy
m.e.conroy

Reputation: 3538

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

Upvotes: 1

Related Questions