AngularJS ngModel 在 ui-bootstrap 标签集中不起作用
AngularJS ngModel doesn't work inside a ui-bootstrap tabset
以下代码说明了这个问题:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script>
angular.module('plunker', ['ui.bootstrap'])
.controller('MainCtrl', function($scope) {
$scope.changes = 0;
$scope.updateValueInScope = function () {
$scope.valueInScope = $scope.value;
$scope.changes++;
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<tabset>
<tab heading="Tab A">
<div class="panel">
<input type="text" ng-model="value" ng-change="updateValueInScope()" />
<br />
<tt>value: {{value}}</tt><br />
<tt>valueInScope: {{valueInScope}}</tt><br />
<tt>changes: {{changes}}</tt>
</div>
</tab>
</tabset>
<input type="text" ng-model="value" ng-change="updateValueInScope()" />
<br />
<tt>value: {{value}}</tt><br />
<tt>valueInScope: {{valueInScope}}</tt><br />
<tt>changes: {{changes}}</tt>
</body>
</html>
在这里普朗克:
http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
这将创建两个文本框,一个在选项卡集内部,另一个在外部。它们都绑定到value
范围变量。更新选项卡集中文本框的内容不会更新作用域中的value
变量。更新选项卡集外部的文本框可以。对任一文本框的更改都将导致通过 ngChange 调用updateValueInScope()
。
有人可以向我解释为什么会这样吗?有没有办法"修复"行为,以便选项卡集中的文本框将修改范围内的模型?
几乎可以肯定的是,问题是您正在尝试绑定到原语(在本例中为浮点数)。这样的事情应该可以解决它。
$scope.data = {}
$scope.updateValueInScope = function () {
$scope.data.valueInScope = $scope.data.value;
$scope.changes++;
}
基本上在角度中,如果您绑定到原语,则会传递变量的值,而不是对它的引用,这可能会破坏 2 向绑定。我猜 tabset
指令创建了自己的作用域,因此控制器中定义的 valueInScope
变量在tabset
的子作用域中失去了绑定,因为它是原语。无论如何,不要绑定到基元,它应该可以工作。
这是 plunk 的固定版本
相关文章:
- 在<页眉>标签
- 在jstree中,如何将指定的节点集中到大型树上
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- React中的数据集表示
- iframe正在添加标签,需要删除它们
- Node.js正在更改应用程序以使用集群模块
- 使用相同的数据集绘制各种符号
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- AngularJS ngModel 在 ui-bootstrap 标签集中不起作用
- Highcharts-如何将标签集中在日期时间x轴上
- 使用javascript访问其他帧集中以前的帧集id
- 我如何将json数据集设置为标签的图表与c3.js
- Javascript setInterval/setTimeout不工作时,浏览器标签不集中
- 如何在Chart.js中将y轴上的数据集添加到x轴上的标签
- 如何删除字段集内的所有标签
- 如何设置框架集的固定宽度并集中对齐
- 如何在不影响图表的情况下删除数据集的按钮标签?
- Chart.js每个数据集有不同标签的折线图