【问题标题】:Angular transcluded directive with two-way binding to controller not updating与控制器双向绑定的角度嵌入指令未更新
【发布时间】:2023-03-25 01:51:01
【问题描述】:

我正在使用这个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

【问题讨论】:

  • 这听起来像是原型继承的问题,看看stackoverflow.com/a/14049482/957731
  • 嗯。但是 transcluded 指令和 dropdown 指令都有一个独立的范围,控制器范围是父级,对吧?让我看看我能不能测试一下。
  • 我试图在你的 plunker 中测试它,但是代码很多,我没有太多耐心,所以可能是另一个问题。我认为仍然值得研究。无论如何,这个链接的答案是一个很好的阅读。

标签: angularjs transclusion


【解决方案1】:

还记得那句名言:“如果你没有在模型中使用 .(dot),那么你做错了吗?” 如果你把手表改成这样:

$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

【讨论】:

  • 太棒了。我刚刚看了这句话出处的视频,我想我永远不会忘记它;)。猜猜在学习了很多新东西之后,在某一时刻回到基础总是明智的。谢谢!
  • 谢谢!这也解决了我的问题。我们需要将项目添加为嵌套对象,这对任何人来说都是不是很奇怪?
猜你喜欢
  • 2016-06-08
  • 2016-08-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多