如果在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鏈接

Answer 1

基本上在角度，如果你綁定到一個原語，變量的值被傳遞，而不是對它的引用，這可以打破雙向綁定。 我猜測tabset指令創建了自己的作用域，因此控制器中定義的valueInScope變量在tabset的子作用域中丟失了它的綁定，因為它是一個原語。

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

對象解決方案

您也可以使用$parent.parentproperty綁定子范圍。 這將阻止子范圍創建自己的屬性。

使用$ parent解決方案

Answer 2

您可以通過在作用域上創建對象然后在對象上添加屬性而不是在控制器內添加作用域來解決此問題。

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

您可以在下面的plunker鏈接中驗證這一點

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