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

问题描述

如果在 uib-tabset 中使用，则值不会与作用域的变量绑定.在以下示例中，我尝试在 uib-tab 内部和外部获取 $scope.message :

angular.module("app", ["ui.bootstrap"]).controller("myctrlr", ["$scope", function($scope){$scope.message = "我的消息";}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><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 header="静态标题"><input type="text" ng-model="message" ng-change="change()"/><br/>在 uib-tab 中:{{ message }}</uib-tab><uib-tab header="另一个标题">我有一个 HTML 标题和一个选择回调.很酷！</uib-tab></uib-tabset>在 uib-tab 之外:{{ message }}

我声明了 $scope.message 并尝试将它与 uib-tab 中的 input 元素绑定.但是当我改变它的值时，这些改变并没有反映在 uib-tab 之外.

jsfiddle 链接

解决方案

基本上在 angular 中，如果绑定到原始变量，则传递变量的值，而不是对它的引用，这会破坏 2 路绑定.我猜是 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屋！