我在下面的结构中有一个屏幕。
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>
我无法访问第二个标签中第一个标签中输入的输入字段值。如果我将代码移出tabset,它可以正常工作。给下面的plunker。
我在做错了什么?如果屏幕只有一个控制器并在标签之间共享模型,那将是非常棒的。Plunker代码: http://plnkr.co/edit/MZdELPvnaFp9pRvgJHVd?p=preview
答案 0 :(得分:1)
不建议像这样污染$rootScope
,而是可以在控制器之间共享一个公共服务数据,或者只为所有选项卡使用一个控制器,例如:
[ 1 ]在您的控制器之间共享公共服务数据:
<强> 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 ]为所有标签使用一个控制器
<强> 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>