将数据从 angular 表单传递到另一个控制器

Question

我是 angularjs 的新手。我想将数据从 html 表单传递到另一条路线。

这里是index.html

的部分

<div ng-app="myApp" ng-controller="HomeController">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div ng-view=""></div>
            </div>
        </div>
    </div>
</div>

这是路线

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
   $routeProvider.when('/', {
   templateUrl: 'views/home.html',
   controller: 'HomeController'
});
$routeProvider.when('/about', {
  templateUrl: 'views/about.html',
  controller: 'AboutController'
});
}]);

当路由为 / 时，它会到达 views/home.html 其中有一个表单

<form action="#/about" ng-submit="submitData()">
    <input type="text" name="address" ng-model="user.address" />
    <input type="submit" />
</form>

我有一个 user 服务，其实现是

myApp.factory("user", function () {
     return {};
});

我在 HomeController 中注入 user 服务，就像

 myApp.controller("HomeController", function ($scope, user) {
          $scope.user = user;
          // and then set values on the object

          // $scope.user.address = "1, Mars";    // when uncomment this line it can be accessed on AboutController? Why? Otherwise I cannot access user.address
          console.log($scope.user);
  });

不要在上面的代码中注意我的评论..

并像

一样将用户传递给AboutController

myApp.controller("AboutController", function ($scope, user) {
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
    console.log($scope.user);
});

这里是about.html

<p>
    {{ user.address }}
</p>

问题： {{user.address}} 在 AboutController 上不起作用。我看不到任何输出...但是当我从上面的代码中删除注释时...它只在控制器中显示硬编码值我错过了什么？

这是工作演示 http://ashoo.com.au/angular/#/

Answer 1

目前，您的所有服务所做的就是将一个空白对象 return {} 传递给它所注入的任何控制器。您需要一种 getter/setter 方法，以便在 Home 视图中设置数据，并在 About 视图中检索数据。

因此您的服务可能如下所示：

myApp.factory("user", function () {

     var dataObj = {};

     return {
            setData: function(data) {
               dataObj.username = data.username;
            },
            getData: function() {
               return dataObj;
            }
     };
});

现在您可以在 Home 控制器中设置数据：

myApp.controller("HomeController", function ($scope, user) {

    $scope.submitData = function(data)  {  //pass in ng-model
       user.setData(data);  //call 'user' service to set data
    }
  });

并从您的 About 控制器调用它：

myApp.controller("AboutController", function ($scope, user) {
    $scope.user = user.getData();  //Assign 
    console.log($scope.user.username);
});

而你 html 看起来像：

<form action="#/about" ng-submit="submitData(user.username)">
    <input type="text" name="address" ng-model="user.username" />
    <input type="submit" />
</form>

将数据从 angular 表单传递到另一个控制器

Pass data from angular form to another controller

javascript

jquery

model-binding

angularjs