如果在
uib-tabset内使用,则值不与范围的变量绑定.
在下面的示例中,我尝试在uib-tab内部及其外部获取$scope.message：
在下面的示例中,我尝试在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>
我声明了$scope.message并尝试将其与uib-tab中的input元素绑定.但是当我更改它的值时,更改不会反映在uib-tab之外.
解决方法
基本上以角度为单位,如果你绑定到一个原语,则传递变量的值,而不是对它的引用,这可能会破坏双向绑定.我猜测tabset指令创建了自己的作用域,因此控制器中定义的valueInScope变量在tabset的子作用域中丢失了它的绑定,因为它是一个原语.
$scope.data = {message:'my message'}
您也可以使用$parent.parentproperty绑定子范围.这将阻止子范围创建自己的属性.
