Angular transcluded directive with two-way binding to controller not updating

Question

I am using this https://github.com/blackgate/bg-splitter for creating horizontal and vertical pane splitters. (The full code is in the plunkr I have created)

Since I started using it, I have an issue with the two-way binding of a controller and directive.

The directive has two variables, listData and the selectedOption:

template: '<select ng-model="selectedOption" ng-options="l.name for l in listData" class="form-control"></select>',
    scope: {
        listData: "=",
        selectedOption: "="
    },

The controller has these variables and has a watch function to watch for changes:

$scope.listdata = [{id : 1, name : "listitem1"},{id : 2, name : "listitem2"},{id : 3, name : "listitem3"}];

$scope.selectedOption = null;

$scope.$watch('selectedOption', function() {
        console.log('updating selected choice');
        console.log($scope.selectedOption);
}, true);

And the directive is being used like:

<dropdown list-data="listdata" selected-option="listItem"></dropdown>

Without the paneSplitter the dropdown is working. For some reason, when the bound variable is updated in the dropdown directive, it doesn't get updated in the controller. This is probably a scope issue, but I can't seem to figure it out myself. Any help is greatly appreciated. Please see the following plunkr with the full code:

http://plnkr.co/edit/UnJaPV8LYm3unILEU3Lq

This sounds like a problem with prototypical inheritance, take a look at http://stackoverflow.com/a/14049482/957731 — ivarni, Jul 18 '14 at 12:05
Hmm. But the transcluded directive and the dropdown directive both have an isolated scope with the controllers scope as parent right? Let me see if I can test this. — Daan van Hulst, Jul 18 '14 at 12:27
I tried to test it in your plunker but there was a lot of code and I didn't have a lot of patience, so it might be another issue. Still worth looking into I think. That linked answer is a very good read regardless. — ivarni, Jul 18 '14 at 12:28

score 1 · Accepted Answer · answered Jul 18 '14 at 12:34

1

Remember the famous quote: "If you are not using a .(dot) in your models you are doing it wrong?" If you change the watch to this:

$scope.$watch('data.listItem', function() {
        console.log('updating selected choice');
        console.log($scope.data.listItem);
}, true);

and in change the Html to this

<dropdown list-data="listdata" selected-option="data.listItem"></dropdown>

Here a Plunker

answered Jul 18 '14 at 12:34

Edminsson

2,426
20
25

Awesome. I just watched the video where this quote comes from, and I don't think I will ever forget it ;). Guess after learning a lot of new stuff, it is always wise to go back to the basics at one point. Thanks! – Daan van Hulst Jul 18 '14 at 13:23
Thanks! This solved my issue as well. Does it seem odd to anyone that we need to add items as nested objects? – Chris Mar 05 '15 at 21:26

Angular transcluded directive with two-way binding to controller not updating

1 Answers1