Tabset $rootScope 范围未更新答案

【问题标题】：Tabset $rootScope scope not updatingTabset $rootScope 范围未更新
【发布时间】：2014-09-08 00:01:05
【问题描述】：

我在下面的结构中有一个屏幕。

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>

我无法从第二个选项卡访问在第一个选项卡中输入的输入字段值。如果我将代码移出标签集，它工作正常。在下面给出 plunker。

我做错了什么？如果屏幕只有一个控制器并跨标签共享模型，那就太好了。

Plunker 代码： http://plnkr.co/edit/MZdELPvnaFp9pRvgJHVd?p=preview

【问题讨论】：

标签： angularjs angularjs-scope angular-ui angular-ui-bootstrap

【解决方案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>

【讨论】：