本文介绍了Tabset $rootScope 范围未更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下结构的屏幕.
UserExperienceScreen<标签集>选项卡 1 - <控制器><表格>- 输入字段 - 表单提交 - 转到 tab2选项卡 2 - <controller1><表格>- 根据 tab1 信息填充其他详细信息 - 表单提交 - 转到 tab3选项卡 3 - ....</tabset>
我无法从第二个选项卡访问在第一个选项卡中输入的输入字段值.如果我将代码移出标签集，它就可以正常工作.下面给出plunker.
我做错了什么?如果屏幕只有一个控制器并跨标签共享模型，那就太好了.
Plunker 代码:http://plnkr.co/edit/MZdELPvnaFp9pRvgJHVd?p=preview
解决方案
像这样污染 $rootScope 是不可取的，相反你可以在你的控制器之间共享一个公共服务数据，或者干脆为所有标签使用一个控制器，例如:
[1] 在您的控制器之间共享公共服务数据:
演示
JAVASCRIPT
angular.module('plunker', ['ui.bootstrap']).service('Common', function() {this.tabData = {};}).controller('SampleController', function($scope, Common) {$scope.tabData = Common.tabData;}).controller("SampleTab2Controller", function($scope, Common) {$scope.tabData = Common.tabData;});
HTML
<tab header="Step 1" active="steps.step1"><div data-ng-controller="SampleController"><form data-ng-submit="submitTab1()"><label>输入文本</label><input type="text" ng-model="tabData.text" required ><button type="submit">下一步</button></表单>
</tab><tab header="Step 2" active="steps.step2"><div data-ng-controller="SampleTab2Controller"><form name="step2"><p>来自 Tab1 的文本</p><input type="text" ng-model="tabData.text" ></表单>
</tab></tabset>
[2] 为所有标签使用一个控制器
演示
JAVASCRIPT
angular.module('plunker', ['ui.bootstrap']).controller('TabController', function($scope) {});
HTML
<tab header="Step 1" active="steps.step1"><div><form data-ng-submit="submitTab1()"><label>输入文本</label><input type="text" ng-model="tabText" 需要 ><button type="submit">下一步</button></表单>
</tab><tab header="Step 2" active="steps.step2"><div><form name="step2"><p>来自 Tab1 的文本</p><input type="text" ng-model="tabText" ></表单>
</tab></tabset>
I've a screen in below structure.
UserExperienceScreen
<tabset>
tab 1 - <controller> <form> - input fields - form submit - go to tab2
tab 2 - <controller1> <form> - populate other details based on the tab1 information - form submit - go to tab3
tab 3 - ....
</tabset>
I'm not able to get access the input field values entered in first tab from second tab. If i move the code out of the tabset it works fine. given plunker below.
what am i doing wrong? it would be greatful if the screen have only one controller and share model across tabs.
Plunker Code:http://plnkr.co/edit/MZdELPvnaFp9pRvgJHVd?p=preview
解决方案
It is not advisable to pollute the $rootScope like this, instead you can either share a common servce data across your controllers or simply use one controller for all your tabs, such as the following:
[1] Share a common service data across your controllers:
DEMO
JAVASCRIPT
angular.module('plunker', ['ui.bootstrap'])
.service('Common', function() {
this.tabData = {};
})
.controller('SampleController', function($scope, Common) {
$scope.tabData = Common.tabData;
})
.controller("SampleTab2Controller", function($scope, Common) {
$scope.tabData = Common.tabData;
});
HTML
<tabset ng-init="steps={step1:true, step2:false}">
<tab heading="Step 1" active="steps.step1">
<div data-ng-controller="SampleController">
<form data-ng-submit="submitTab1()">
<label>Input Text</label>
<input type="text" ng-model="tabData.text" required >
<button type="submit">Next</button>
</form>
</div>
</tab>
<tab heading="Step 2" active="steps.step2">
<div data-ng-controller="SampleTab2Controller">
<form name="step2">
<p>Text from Tab1</p>
<input type="text" ng-model="tabData.text" >
</form>
</div>
</tab>
</tabset>
[2] Use one controller for all your tabs
DEMO
JAVASCRIPT
angular.module('plunker', ['ui.bootstrap'])
.controller('TabController', function($scope) {
});
HTML
<tabset ng-init="steps={step1:true, step2:false}"
ng-controller="TabController">
<tab heading="Step 1" active="steps.step1">
<div>
<form data-ng-submit="submitTab1()">
<label>Input Text</label>
<input type="text" ng-model="tabText" required >
<button type="submit">Next</button>
</form>
</div>
</tab>
<tab heading="Step 2" active="steps.step2">
<div>
<form name="step2">
<p>Text from Tab1</p>
<input type="text" ng-model="tabText" >
</form>
</div>
</tab>
</tabset>
这篇关于Tabset $rootScope 范围未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
