Question

我正在开发一款可在不同屏幕之间切换的应用。每个屏幕通过用户选择按钮并单击它或选择单选按钮来收集用户的数据。将至少有5-6个屏幕。我需要关于如何以及在何处存储所收集数据的想法以及在不同屏幕之间移动的最佳方式：切换页面上div内显示的内容或转到完全不同的页面。每个屏幕上的数据来自不同的数据库表。

到目前为止，我已完成一个屏幕 - 它从数据库中提取数据（通过Web API调用），并根据提取的数据，在超链接中显示不同的图像。

我想要做的是捕获用户点击的超链接并将该值存储在某个位置（一个位置将持续到收集并存储在数据库中的所有数据之后），然后转到下一个屏幕。我有点困在这里，需要一些帮助和想法。

这是我到目前为止所得到的：

屏幕1的用户界面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Types</title>
<script src="../../Scripts/angular.js"></script>
<script src="TypesCtrl.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
    <h3>Select a type</h3>
    <br />
    <table>
        <tr>

            <td ng-repeat="Type in Types">

                <a href="#"><img src="Images/type1.png" ng-show="Type.TypeId=='1'" /></a>
                <a href="#"><img src="Images/type2.png" ng-show="Type.TypeId=='2'" /></a>
                <a href="#"><img src="Images/type3.png" ng-show="Type.TypeId=='3'" /></a>
                <a href="#"><img src="Images/type4.png" ng-show="Type.TypeId=='4'" /></a>
    </td>


    </tr>
    </table>
</div>
</body>
</html>

这是我的角度控制器：

(function () {
    angular.module("myApp", []).controller("myController", TypeCtrlFunction);

    TypeCtrlFunction.$inject = ["$scope", "$http"];
    function TypeCtrlFunction($scope, $http) {
        $http.get('http://localhost:49358/api/myAPI/GetTypes').
        then(function (result) {
            $scope.DeviceTypes = result.data;
        });
    };
})();

我很感激帮助我前进

Answer 1

您可以通过设置服务或使用rootScope在不同的状态/控制器之间共享数据。通常，使用服务是更好的做法。然后，您可以使用uiRouter更改视图。设置状态的示例：

app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/main");

$stateProvider
  .state('main', {
    url: '/main',
    templateUrl: 'main.html'
  })
  .state('main.mainstuff', {
    url: '/mainstuff',
    templateUrl: 'mainstuff.html'
  })
  .state('main.secondstuff', {
    url: '/secondstuff',
    templateUrl: 'secondstuff.html'
  });
}]);

Here是一个了解如何使用嵌套状态实现的插件。此示例使用rootScope，但您应该考虑使用AndyHasIt提到的服务。

Answer 2

您可以使用ui-routing在不同视图之间进行切换。至于存储数据，有两种方法可以做到。一种是使用服务来存储值，或者你也可以在浏览器中使用本地存储或cookie来实现相同的

Answer 3

要在控制器之间共享数据，请使用服务：

app = angular.module('MyApp', []);
app.service('SharedDataService', function() {
  return {
    someVar: 'hello'
  }
})

app.controller('Controller1', function(SharedDataService, $scope) {
  $scope.value1 = SharedDataService.someVar;
})

app.controller('Controller2', function(SharedDataService, $scope) {
  $scope.value1 = SharedDataService.someVar; //The same value
})

要在同一页面中加载不同的网页，我建议您使用ngRoute或uiRouter

AngularJS应用程序从多个屏幕收集数据

3 个答案: