Question

我需要创建3个选项卡，每个选项卡视图都有自己的控制器，但它们都是相互连接的。我需要保留数据，当我从标签移动到另一个标签并返回时，就像表单字段文本或其他任何内容。

我尝试使用ng-include和ng显示的方式，但它不起作用，第二步控制器剂量运行。

这是主页，从第一步开始：

<section class="step-one steps-container" ng-show="stepOneView">
        // step one content

        <button ng-click="goToStepTwo()">Next</button>

</section>

<div ng-include="'client/hunter/step-two.html'" ng-show="stepTwoView"></div>

<div ng-include="'client/hunter/step-three.html'" ng-show="stepThreeView"></div>

第二步tpl -

<section ng-controller="stepTwoController">
 //content
</section>

第一步控制器：

$scope.stepOneView = true;

$scope.goToStepTwo = function() {
 $scope.stepOneView = false; 
 $scope.stepTwoView = true;
}

第二步控制器 -

console.log('Im in step two'); // This is not working

Answer 1

我会有一个主控制器，然后每个选项卡都有一个子控制器。主控制器将使用$ scope变量控制哪个选项卡可见，该变量跟踪当前选项卡：

<body ng-Controller="MainCtrl">
    <a href="javascript: void(0)" ng-click="changeTab(1)">1</a>
    <a href="javascript: void(0)" ng-click="changeTab(2)">2</a>
    <a href="javascript: void(0)" ng-click="changeTab(3)">3</a>
    <div ng-include="'tab1.html'" ng-show="tab === 1"></div>
    <div ng-include="'tab2.html'" ng-show="tab === 2"></div>
    <div ng-include="'tab3.html'" ng-show="tab === 3"></div>
</body>

app.controller('MainCtrl', function($scope) {
  $scope.tab = 1;

  $scope.changeTab = function (tab) {
    $scope.tab = tab;
  };
});

tab1.html

<div ng-controller="Tab1Ctrl">
  <label>Tab1</label>
  <div>
    <label>Name: </label>
    <input type="text"/>
  </div>
</div>

tab1.js：

angular
  .module('plunker')
  .controller('Tab1Ctrl', function($scope) {
  });

演示：http://plnkr.co/edit/iB6vhgIjT4fjYuBqVVS6?p=preview

正如您在演示文稿中看到的那样，如果您在文本框中输入了一些文本，请切换标签然后切换回文本。

Angular创建选项卡视图而不会丢失数据

1 个答案: