在 if 条件下从 Bootstrap 选项卡获取模型值

Question

我在对处于 ng-if 条件下的选项卡内的表单模型进行双向绑定时遇到问题。

Plunker link 我的问题是

http://plnkr.co/edit/F5h8eCu7IlXlwi1XhdV7?p=preview

我已经尝试了所有可能的方法，但在选项卡集下无法识别范围变量。使用 $parent 引用在 "ng-if" 部分访问范围变量，但由于某种原因，选项卡集无法识别这些值中的任何一个。任何帮助或提示都会有所帮助

代码如下

// Code goes here
var app =angular.module('textModule',['ui.bootstrap']);


app.controller('checktest',function($scope){
  
  $scope.step= 0;
  $scope.configFormData = "angular test";
   $scope.configFormData2 = "angular test 2";
  
  
  
});

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="jquery@2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script data-require="angular-ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="textModule">
  <div ng-controller="checktest">
    <div ng-form="configForm">
      <div class="general" ng-if="step == 0">
        {{$parent.configFormData}} <br />
        {{$parent.configFormData2}}
        <tabset class="nav nav-tabs">
          <tab>
            <tab-heading>tab 1</tab-heading>
            <div role="tabpanel" class="tab-pane active" id="network" aria-labelledby="network-tab">
              {{$parent.configFormData}}
              <input type="text" ng-model="$parent.configFormData" />
            </div>
          </tab>
          <tab>
            <tab-heading>tab 2 </tab-heading>
            <div role="tabpanel" class="tab-pane" id="region" aria-labelledby="region-tab">
               <input type="text" ng-model="$parent.configFormData2" />
            </div>
          </tab>
        </tabset>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

在 Angular 中，范围变量的继承仅适用于对象，不适用于直接范围属性。

https://github.com/angular/angular.js/wiki/Understanding-Scopes

尝试使用一些数据对象并绑定到该对象：

app.controller('checktest',function($scope){
  $scope.step = 0;
  $scope.data = {
    configFormData: "angular test",
    configFormData2: "angular test 23",
  };
});

<input type="text" ng-model="data.configFormData" />

顺便说一下：在你的案例中你不需要 $parent。

Answer 2

将您的 html 更新为如下所示，它应该可以工作。正如 mattanja 所提到的，你不需要 parentScope

 <!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="jquery@2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script data-require="angular-ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="textModule">
  <div ng-controller="checktest">
    <div ng-form="configForm">
      <div class="general" ng-if="step == 0">
        {{$parent.configFormData}} <br />
        {{$parent.configFormData2}}
        <tabset class="nav nav-tabs" >
          <tab>
            <tab-heading>tab 1</tab-heading>
            <div role="tabpanel" class="tab-pane active" id="network" aria-labelledby="network-tab">
              {{configFormData}}
              <input type="text" ng-model="configFormData" />
            </div>
          </tab>
          <tab>
            <tab-heading>tab 2 </tab-heading>
            <div role="tabpanel" class="tab-pane" id="region" aria-labelledby="region-tab">
               <input type="text" ng-model="configFormData2" />
            </div>
          </tab>
        </tabset>
      </div>
    </div>
  </div>
</body>

</html>

在 if 条件下从 Bootstrap 选项卡获取模型值

Get model value from Bootstrap tab under if condition

javascript

angularjs

angularjs-scope

angular-bootstrap