[英]Value is not binding with scope's variable if used inside uib-tabset
Value is not binding with scope's variable if used inside uib-tabset . 如果在uib-tabset中使用,则值不与作用域的变量绑定。 Here in following example I tried to get $scope.message
inside uib-tab and outside of it : 在下面的示例中,我尝试在uib-tab内部及其外部获取$scope.message
:
angular.module("app", ["ui.bootstrap"]) .controller("myctrlr", ["$scope", function($scope){ $scope.message = "my message "; }]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> <div ng-app="app" ng-controller="myctrlr" class="col-md-6 col-md-offset-3"> <uib-tabset> <uib-tab heading="Static title"> <input type="text" ng-model="message" ng-change="change()" /> <br /> Inside uib-tab : {{ message }} </uib-tab> <uib-tab heading="Another title"> I've got an HTML heading, and a select callback. Pretty cool! </uib-tab> </uib-tabset> Outside uib-tab : {{ message }} </div>
I declared $scope.message
and tried to bind it with the input
element inside uib-tab. 我声明了$scope.message
并尝试将其与uib-tab中的input
元素绑定。 But when I changed it's value, the changes are not reflecting on outside of uib-tab. 但是当我更改它的值时,更改不会反映在uib-tab之外。
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. 我猜测tabset指令创建了自己的作用域,因此控制器中定义的valueInScope变量在tabset的子作用域中丢失了它的绑定,因为它是一个原语。
$scope.data = {message:'my message'}
also you can use $parent.parentproperty
to bind child scope. 您也可以使用$parent.parentproperty
绑定子范围。 This will prevent the child scope from creating its own property. 这将阻止子范围创建自己的属性。
You can solve this issue by creating an object on the scope and then adding the property on object instead of the scope inside the controller. 您可以通过在作用域上创建对象然后在对象上添加属性而不是在控制器内添加作用域来解决此问题。
$scope.obj = {message : 'my message'};
You can verify this in the below plunker link 您可以在下面的plunker链接中验证这一点
http://plnkr.co/edit/3koAJnkOyf6hfGwO6AuD?p=preview http://plnkr.co/edit/3koAJnkOyf6hfGwO6AuD?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.