將數據從角度形式傳遞到另一個控制器

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>