我正在开发在不同屏幕之间切换的应用程序。每个屏幕都通过用户选择一个按钮并单击它或选择一个单选按钮来从用户收集数据。至少会有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;
        });
    };
})();


我会很高兴能帮助我前进

最佳答案

您可以通过设置服务或使用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提到的服务。

09-27 01:22
查看更多