如果在 uib-tabset 中使用，则值不与范围的变量绑定

Question

如果在 uib-tabset 内部使用，值不会与作用域的变量绑定。在下面的示例中，我试图在 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 之外。

jsfiddle link

Answer 1

您可以通过在作用域上创建对象然后在对象上添加属性而不是控制器内的作用域来解决此问题。

  $scope.obj = {message : 'my message'};

您可以在下面的插件中验证这一点 link

http://plnkr.co/edit/3koAJnkOyf6hfGwO6AuD?p=preview

Answer 2

基本上在 angular 中，如果你绑定到一个原始变量的值被传递，而不是对它的引用，这会破坏双向绑定。我猜 tabset 指令创建了它自己的范围，所以控制器中定义的 valueInScope 变量失去了它在 tabset 的子范围内的绑定，因为它是一个原语。

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

Solution by Object

您也可以使用 $parent.parentproperty 绑定子作用域。这将阻止子作用域创建自己的属性.

Solution by using $parent

如果在 uib-tabset 中使用，则值不与范围的变量绑定

Value is not binding with scope's variable if used inside uib-tabset

html

javascript

angularjs

angular-ui