如果在uib-tabset中使用，则值不与作用域的变量绑定 [英] Value is not binding with scope's variable if used inside uib-tabset

问题描述

如果在 uib-tabset 中使用，则值不会与范围变量绑定。
在下面的示例中，我试图在uib-tab内部及其外部获取 $ scope.message ：

< pre class =snippet-code-js lang-js prettyprint-override> angular.module（app，[ui.bootstrap]）。invtroller（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 =appng-controller =myctrlr class =col-md-6 col-md-offset-3> < UIB-标签集> < uib-tab heading =静态标题> < input type =textng-model =messageng-change =change（）/> < br />内部uib-tab：{{message}}< / uib-tab> < uib-tab heading =另一个标题>我有一个HTML标题和一个选择回调。太酷了！ < / UIB-标签> < / UIB-标签集>外部uib-tab：{{message}}< / div>  

我声明 $ scope.message 并尝试将其与uib-tab中的输入元素绑定。但是当我更改它的值时，更改不会反映在uib-tab之外。

jsfiddle链接

解决方案

基本上在角度，如果你绑定一个原始值的传递变量，而不是对它的引用，这可能会破坏双向绑定。我猜测tabset指令创建了自己的作用域，因此控制器中定义的valueInScope变量在tabset的子作用域中丢失了它的绑定，因为它是一个原语。

  $ scope.data = {message：'my message'} 
  

按对象解决方案

还有你可以使用 $ parent.parentproperty 来绑定子范围。这将阻止子范围创建自己的属性。

使用$ parent解决方案

Value is not binding with scope's variable if used inside uib-tabset. Here in following example I tried to get $scope.message inside uib-tab and outside of it :

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. But when I changed it's value, the changes are not reflecting on outside of uib-tab.

jsfiddle link

解决方案

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.

 $scope.data = {message:'my message'}

Solution by Object

also you can use $parent.parentproperty to bind child scope. This will prevent the child scope from creating its own property.

Solution by using $parent

这篇关于如果在uib-tabset中使用，则值不与作用域的变量绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！