标签集$ rootScope范围不更新 [英] Tabset $rootScope scope not updating

问题描述

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

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>

我不能够获得访问从第二个选项卡中的第一个选项卡中输入的输入字段值。如果我移动code出来的标签集的正常工作。下面给出plunker。

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=$p$pview

Plunker Code: http://plnkr.co/edit/MZdELPvnaFp9pRvgJHVd?p=preview

推荐答案

这是不可取的污染 $ rootScope 这样的，相反，您可以共享一个共同的servce在您的控制器上的数据，或简单地使用一个控制器为您的所有标签，如以下内容：

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 ]分享整个控制器的一个共同的服务数据：

[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 ]使用一个控制器为您的所有标签页

[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>

这篇关于标签集$ rootScope范围不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！