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

Angular create tabs views without loosing data

本文关键字：数据 创建 选项 视图 Angular      更新时间：2023-09-26

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

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

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

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

第二步 - 

<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

我会有一个主控制器，然后每个选项卡都有一个子控制器。主控制器将使用跟踪当前选项卡的 $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;
  };
});

标签1.html

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

选项卡1.js：

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

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

正如您在演示中看到的那样，如果您在文本框中输入一些文本，切换选项卡，然后切换回文本保留。

相关文章：