Question

我是角度js的新手。我创建了一个页面，我必须将数据发布到其他html页面，然后我必须使用angular接收其他页面中的数据。

我创建了一个小应用程序。我已将数据从home.html页面发布到getdata.html页面，在getdata.html页面上我必须接收该数据。我必须使用表单发布来获取数据。我必须使用post请求在header上传递数据，然后我必须接收它

test.js

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: 'home.html',
        controller: 'StudentController'
    }).when('/getdata', {
        templateUrl: 'getdata.html',
        controller: 'getdataController'
    })
    .otherwise({
        redirectTo: '/home'
    });
});

mainApp.controller('StudentController', function($scope,$location,$window) {
 $scope.user = {firstName:"John", lastName:"Doe"};
});
mainApp.controller('getdataController', 
function($scope,$location,$window,$routeParams) { 
 alert("Get Data"); 
});

getdata.html

<div ng-controller='getdataController'>
<h2>Get Data</h2>
</div>

home.html的

<div class="container" ng-controller='StudentController'>
<h1>Post Form Data</h1> 
<form novalidate method="post" action='http://localhost/#/getdata'>
<input type='hidden' value='Mohan' name="hiddenfld1"/>
<input type='hidden' value='Sharma' name="hiddenfld2"/>
<input type='hidden' value='ABC.com' name="hiddenfld3"/>
First Name:<br>
<input type="text" name='fname' ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" name='lname' ng-model="user.lastName">
<br><br>
<input type="submit" value="Submit">
</form> 
</div>

的index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8"> 
</head>
<body>

  <div ng-app="mainApp">
    <ng-view></ng-view>
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
</body>

Answer 1

app.controller('example-ctrl',$scope,$http){

$scope.saveFormData = function(argument_list){
   $http.post('url',data,header).then(function(response){
    // success response
  },function(error){
    // error 
  });
 }
}

我认为这link可以帮助你

Answer 2

试试这个。首先，您需要在HTML表单中进行一些更改。删除方法并使用ng-submit。接下来，您需要注册工厂以保存和检索数据。请注意，如果刷新窗口/状态，则数据将不会持续存在。如果这是你想要的（另一个问题），你需要探索其他方法。然后在主控制器中添加一个范围功能，在提交时添加保存用户，并重定向该呼叫成功。

mainApp.controller('StudentController', function($scope, $location, $window, exampleFactory) {
  $scope.user = {
    firstName: "John",
    lastName: "Doe"
  };

  $scope.submitUser = function() {
    exampleFactory.saveUser(user)
      .then(function() {
        $location.path('getdata');
      });
  };
});
mainApp.controller('getdataController',
  function($scope, $location, $window, $routeParams, exampleFactory) {
    exampleFactory.getUserDetails()
      .then(function(user) {
        $scope.user = user;
      });
  });
mainApp.factory('exampleFactory', [function() {

  var currentUser;
  return {
    saveUser: function(userDetails) {
      currentUser = userDetails;
    },
    getUserDetails: function() {
      return currentUser;
    }
  };
}]);

<div class="container" ng-controller='StudentController'>
  <h1>Post Form Data</h1> // do not use method type on angular forms, add no validate, and use the routers native way to redirect.
  <form novalidate ng-submit="submitUser()">
    <input type='hidden' value='Mohan' name="hiddenfld1" />
    <input type='hidden' value='Sharma' name="hiddenfld2" />
    <input type='hidden' value='ABC.com' name="hiddenfld3" /> First Name:<br>
    <input type="text" name='fname' ng-model="user.firstName"><br> Last Name:<br>
    <input type="text" name='lname' ng-model="user.lastName">
    <br><br>
    <input type="submit" value="Submit">
  </form>
</div>

使用角度在交叉域上发布表单数据

2 个答案: