Javascript 在if条件下从引导选项卡获取模型值_Javascript_Angularjs_Angularjs Scope_Angular Bootstrap

Javascript 在if条件下从引导选项卡获取模型值

javascript angularjs

Javascript 在if条件下从引导选项卡获取模型值,javascript,angularjs,angularjs-scope,angular-bootstrap,Javascript,Angularjs,Angularjs Scope,Angular Bootstrap,我面临的问题是，如何在选项卡内对处于ng if条件下的表单模型进行双向绑定与我的问题相关联的是我已经尝试了所有可能的方法，但是在tabset下无法识别范围变量。使用$parent引用在“ng if”部分中访问范围变量，但由于某些原因，选项卡集无法识别这些值中的任何一个。任何帮助或暗示都会有帮助代码如下 //代码在这里 var app=angular.module（'textModule'，['ui.bootstrap']）；应用程序控制器（'检查测试'），功能（$范围）{ $sco

我面临的问题是，如何在选项卡内对处于ng if条件下的表单模型进行双向绑定

与我的问题相关联的是

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

代码如下

//代码在这里
var app=angular.module（'textModule'，['ui.bootstrap']）；
应用程序控制器（'检查测试'），功能（$范围）{
$scope.step=0；
$scope.configFormData=“角度测试”；
$scope.configFormData2=“角度测试2”；
});

{{$parent.configFormData}}

{{$parent.configFormData2}
表1
{{$parent.configFormData}}
表2
范围变量的角度继承仅适用于对象，而不适用于直接范围属性

尝试使用某些数据对象并绑定到该对象：
app.controller('checktest',function($scope){
  $scope.step = 0;
  $scope.data = {
    configFormData: "angular test",
    configFormData2: "angular test 23",
  };
});

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

app.controller（'checktest'，函数（$scope）{
$scope.step=0；
$scope.data={
configFormData：“角度测试”，
configFormData2：“角度测试23”，
};
});

顺便说一句：在您的案例中，您不需要$parent。
将您的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>


{{$parent.configFormData}}

{{$parent.configFormData2}
表1
{{configFormData}}
表2