将数据从角度形式传递到另一个控制器

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' 
     }); 
    }]); 

当路由是/它击中在视图/ home.html做为它有一种形式

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

我有一个用户服务，它的实现是

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

我注入用户服务的HomeController像

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>