Angular transcluded指令,双向绑定到控制器不更新

时间:2014-07-18 11:59:22

标签: angularjs transclusion

我使用此https://github.com/blackgate/bg-splitter创建水平和垂直窗格分割器。 (完整的代码在我创建的plunkr中)

自从我开始使用它以来,我遇到了控制器和指令的双向绑定问题。

该指令有两个变量:listData和selectedOption:

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

控制器具有这些变量并具有监视功能以监视更改:

$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);

该指令的使用方式如下:

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

没有paneSplitter,下拉列表正在运行。出于某种原因,当在下拉指令中更新绑定变量时,它不会在控制器中更新。这可能是一个范围问题,但我似乎无法自己解决这个问题。任何帮助是极大的赞赏。请参阅以下plunkr以及完整代码:

http://plnkr.co/edit/UnJaPV8LYm3unILEU3Lq

1 个答案:

答案 0 :(得分:1)

记住这句名言:“如果你在模特中没有使用。(点)你做错了吗?” 如果您将手表更改为:

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

并将Html更改为此

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

这是Plunker