2016-10-10 15 views
0

私はteam_listページとチームページを持っています。ユーザーは、team_listページにあるチームのリストを取得し、そのチームの1つをクリックしてチームページに移動します。ユーザーが行っているチームページがチームAのチームまたはチームBのチームページであるというデータを送信する方法がわかりません。どうすればコントローラ間でデータを共有できますか? 私はサービスを利用すべきだと知っていますが、私はこのコンテキストでそれらをどのように使うべきか分かりません。いくつかの方法を試してコメントしましたが、これについてどうやって行くのかまだ分かりません。バックエンドのためのNode.jsと急行のフレームワークを使用してAngularJSのコントローラ間でデータを共有する方法は?

team_list.html:

<!DOCTYPE html> 
<html> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<head> 
    <title>Team List</title> 
</head> 

<body> 

<h1> 
    Welcome to Your Team List Page! 
</h1> 

<!--<div ng-app="teamListPage" ng-controller="listController"> 
    <fieldset> 
     <legend>Your Teams</legend> 
     <ul> 
      <li ng-repeat="x in [dave, david, darrell]">{{x}}</li> 
      <input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/> 
     </ul> 
    </fieldset> 
</div>--> 

<div ng-app="teamListPage" ng-controller="listController"> 
    <li ng-repeat="x in records"> 
     {{x.team_name}}<br/> 
     <input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/> 
    </li> 
    <input type="button" id="Create" name="Create" value="Create New Team" ng-click="enterCreateTeamPage()" /> 
</div> 

<script> 
    var page = angular.module('teamListPage', []); 
    /*page.factory('myService', function() { 
     var user_id = []; 

     var setUserID = function(newObj) { 
      user_id.push(newObj); 
     }; 

     var getUserID = function(){ 
      return user_id; 
     }; 

     return { 
      setUserID: setUserID, 
      getUserID: getUserID 
     }; 
    });*/ 
    page.factory('myService', function(){ 
     return { 
      data: { 
       user_ID: '' 
      }, 
      update: function(userID) { 
       // Improve this method as needed 
       this.data.user_ID = userID; 
      } 
     }; 
    }); 


    page.controller('listController', function($scope, $http, $window, myService) { 
     console.log(myService.data); 

     var login_http = $http({ 
      method: 'GET', 
      url: '/team_req', 
      params: { user_id: 1 } 
     }).then(
       function (response) { 
        //$window.alert(response.data[0].team_name); 
        $scope.records = response.data; 
        //console.log($scope.records[1]); 
        //alert('successfull ...'); 
       }, function (response) { 
        $window.alert('wrong username/password'); 
       } 
     ) 
     $scope.enterTeamPage = function() { 
      $window.location.href = '/teamPage'; 
     }; 

     $scope.enterCreateTeamPage = function() { 
      $window.location.href = '/createTeamPage'; 
     }; 

    }) 
</script> 



</body> 
</html> 

team_page.html:また

<!DOCTYPE html> 
<html lang="en"> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<head> 
    <meta charset="UTF-8"> 
    <title>Team Page</title> 
</head> 
<body> 
<h1> 
    Team Page 
</h1> 

<div ng-app="teamPage" ng-controller="teamController"> 
    <form id="Communication Board"> 
     <fieldset> 
      <legend>COMMUNICATION BOARD</legend> 
      <h3> 
       chat feature coming up! 
      </h3> 
      <legend>videocall</legend> 
      <h4> 
       video call feature coming up! 
      </h4> 
      <legend>screenshare</legend> 
      <h5> 
       screenshare feature coming up! 
      </h5> 
     </fieldset> 
    </form> 

    <form id="Data Board" action=""> 
     <fieldset> 
      <legend>DATA BOARD</legend> 
      <h6> 
       calendar feature coming up! 
      </h6> 
      <legend>announcements</legend> 
      <h7> 
       All features are coming up very soon! 
      </h7> 
     </fieldset> 
    </form> 

    <p> 
     <input type="button" id="CodingZone" name="CodingZone" value="Go to Coding Zone" ng-click="enterCodingPage()" /> 
    </p> 
</div> 

<script> 
    var page = angular.module('teamPage', []); 
    page.controller('teamController', function($scope, $http, $window) { 

     //get the history of the chat board 
     $scope.getChatHistory = function() { 

      var create = $http({ 
       method: 'Get', 
       url: '/chatHistory' 
      }).then(
        function successful(response) { 
         $scope.theResponse = response.data; 
        }, function unsuccessful(response) { 
         alert('got an error back from server'); 
         $scope.theResponse = response; 
        }); 
     } 

     $scope.enterCodingPage = function() { 
      $window.location.href = '/codingPage'; 
     }; 
    }) 
</script> 
</body> 
</html> 

私はapp.jsに私のサービスを置くべきかindex.js?

答えて

3

コントローラーまたはコンポーネント(ディレクティブ用のラッパー)間でデータを共有する最善の方法は、角度サービスを使用してそれらをコントローラーに挿入することです。 Cuzサービスはシングルトンなので、それぞれが注入されるすべてのコンポーネントに対して単一の状態を提示します。

関連する問題