表集$rootScope作用域不更新
表集$rootScope作用域不更新
提问于 2014-09-07 05:31:22
我在下面有一个屏幕。
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>我无法从第二个选项卡访问在第一个选项卡输入的输入字段值。如果我将代码从表中移出，它就能正常工作。在下面给出柱塞。
我做错什么了？如果屏幕上只有一个控制器并在各个选项卡上共享模型，那就太好了。
柱塞代码：http://plnkr.co/edit/MZdELPvnaFp9pRvgJHVd?p=preview
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-07 05:52:55
这样污染$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
<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为您的所有选项卡使用一个控制器
演示
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25707365
复制相关文章
相似问题
腾讯云开发者
