AngularJS ngModel 在 ui - 编程频道|电子爱好者 - 技术资讯及电子产品介绍！
本文介绍了
AngularJS ngModel 在 ui-bootstrap tabset 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时送ChatGPT账号..
以下代码说明了问题:
<html ng-app="plunker"><头><title>AngularJS Plunker</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.1/css/bootstrap.min.css"/><script src="https://code.angularjs/1.3.6/angular.js"></script><script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script><脚本>angular.module('plunker', ['ui.bootstrap']).controller('MainCtrl', function($scope) {$scope.changes = 0;$scope.updateValueInScope = 函数 () {$scope.valueInScope = $scope.value;$scope.changes++;}});<body ng-controller="MainCtrl"><标签集><tab header="Tab A"><div class="面板"><input type="text" ng-model="value" ng-change="updateValueInScope()"/><br/><tt>值:{{value}}</tt><br/><tt>valueInScope:{{valueInScope}}</tt><br/><tt>变化:{{changes}}</tt></tab></tabset><input type="text" ng-model="value" ng-change="updateValueInScope()"/><br/><tt>值:{{value}}</tt><br/><tt>valueInScope:{{valueInScope}}</tt><br/><tt>变化:{{changes}}</tt>
</html>Plunker 在这里:
http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
这会创建两个文本框，一个在标签集内，一个在外.它们都绑定到 value 范围变量.更新 tabset 内文本框的内容不会更新范围内的 value 变量.更新标签集之外的文本框确实如此.对任一文本框的更改将导致通过 ngChange 调用 updateValueInScope().
有人可以向我解释为什么会这样吗?有没有办法修复"行为，以便标签集内的文本框会修改范围内的模型?
解决方案 几乎可以肯定的问题是您试图绑定到一个原始类型(在本例中是一个浮点数).像这样的东西应该可以解决它.
$scope.data = {}$scope.updateValueInScope = 函数 () {$scope.data.valueInScope = $scope.data.value;$scope.changes++;}基本上在 angular 中，如果您绑定到一个基元，则传递的是变量的值，而不是对它的引用，这会破坏 2 路绑定.我猜测 tabset 指令创建了它自己的作用域，所以控制器中定义的 valueInScope 变量在 tabset 因为它是一个原语.无论如何，不要绑定到原语，它应该可以工作.
这是一个固定版本的plunk
The following code illustrates the problem:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://code.angularjs/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>
Plunker here:
http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
This creates two textboxes, one inside the tabset, and one outside. They are both bound to the value scope variable. Updating the contents of the textbox inside the tabset does not update the value variable in the scope. Updating the textbox outside the tabset does. Changes to either of the textboxes will result in a call to updateValueInScope() via ngChange.
Can someone explain to me why this behaves this way? Is there some way to "fix" the behavior so that the textbox inside the tabset will modify the model in the scope?
解决方案 Almost certainly the issue is that you are trying to bind to a primitive (in this case a float). Something like this should fix it.
$scope.data = {}
$scope.updateValueInScope = function () {
$scope.data.valueInScope = $scope.data.value;
$scope.changes++;
}
Basically in angular, if you bind to a primitive the value of the variable is passed around, and not the reference to it, which can break 2-way binding. I'm guessing that the tabset directive creates its own scope, so the valueInScope variable defined in the controller loses its binding in the child scope of the tabset because its a primitive. Anyway, don't bind to primitives and it should work.
Here is a fixed version of plunk
这篇关于AngularJS ngModel 在 ui-bootstrap tabset 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
本文发布于:2023-04-21 06:22:46，感谢您对本站的认可！
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签： AngularJS ngModel ui
发布评论