如果條件爲

，從Bootstrap選項卡獲取模型值我正在面向在ng-if條件下的選項卡內進行雙向綁定到表單模型的問題。如果條件爲

Plunker鏈接到我的問題是

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="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script data-require="[email protected]*" 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="[email protected]*" 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>

來源

2015-06-18 Anand Joshi

在範圍變量的角度繼承與只，而不是直接作用域屬性對象的工作是有幫助的

的代碼。

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" />

順便說一句：你不需要$父，你的情況。

來源

2015-06-18 08:01:59 mattanja

更新您的HTML，如下所述，它應該工作。正如mattanja提到的，你不需要parentScope

<!DOCTYPE html> 
<html> 

<head> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script data-require="[email protected]*" 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="[email protected]*" 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>

來源

2015-06-18 08:11:59 Aashish

回答

相關問題