javascript - 通过 AngularJS 中的弹出窗口传递模型值

标签 javascript angularjs

<分区>

我想使用 Bootstrap 弹出窗口(来自 Angular-Bootstrap)修改 Controller 的 $scope 上的模型值。弹出框模板似乎正在中断某些连接。

我做了一个小例子来说明我的问题:

指令 1 (master-directive) 将模型作为隔离范围属性。它的模板是一个显示弹出窗口的按钮。弹出窗口的模板显示了指令 2(子指令),它通过隔离范围属性提供模型值,并且将包含某种 UI 控件来修改该属性(在演示中,这个只需单击鼠标)。

通常,更改会传播回 Controller (sub-directive 模型双向绑定(bind)到 master-directive 模型,然后双向绑定(bind)到 Controller 模型。但是,当在弹出窗口中使用包含 sub-directive 的模板时,sub-directivemaster- 之间的双向绑定(bind)指令 已损坏。子指令 中对模型的任何更改都将保留在该指令的本地,不会向上传播。

相关的 Plunkr: http://plnkr.co/edit/3ZnmNUtajXsAHJjCdkkJ?p=preview

这是没有弹出窗口的同一个 Plunkr,证明它可以工作: http://plnkr.co/edit/Mr4djvZCVpEUkgDZpyvV?p=preview

我是否缺少一个步骤来弥补 popover 模块引入的差距?

最佳答案

如果将数据存储在对象中,而不是 Javascript 基元(数字)中,问题就解决了。 Plunkr .

将您的数据存储在这样的对象中:

$scope.data = { num: 5 };

取而代之的是:

$scope.num = 5;

我的假设是弹出窗口正在创建一个子作用域。原型(prototype)继承工作方式的 B/c,子作用域中的数字属性 shadows the number property in the parent (例如, parent 的值(value)不会随着 child 的改变而改变)。

关于javascript - 通过 AngularJS 中的弹出窗口传递模型值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31395777/

相关文章:

javascript - 从基于 typescript 的 Angular Controller 调用 GoogleMap MarkerClusterer 方法

C# JSON 从 JavaScript 发布

angularjs - 如何在AngularJS中关闭浏览器窗口

javascript - Angular JS 深度链接是如何工作的

javascript - 使用 Angular 有条件地显示选择中的选项

javascript - 使用具有 6 段的路径创建 SVG 圆

javascript - 使用 React Router V4 隐藏导航栏

javascript - 函数未将数据注册到数组中

javascript - AngularJS 的 HTML 页面无法正确呈现

angularjs - 在 ng-repeat 中使用相同的值初始化单选按钮