Angularjsを使用してClickイベントの値を別のページに渡す

Question

Angularを使用してあるページから別のページにデータ値を渡そうとしています。私はAngularの方が新しいので、もし馬鹿に聞こえたら、私に同行してください。ここに私のHTMLと角度コードがあります。基本的には、ユーザーがそのdivをクリックすると、別のページにあるフォームにng-modelの "jobtitle"値を入力します。 Page2のため

Page1のためのHTML（データソース）

<div id="portfoliolist" ng-app="careerApp" ng-controller="JobList"> 
<div class="portfolio DataScience col-xs-12 col-sm-12 col-md-4 col-lg-4" data-cat="DataScience"> 
<a href="~/career-form.cshtml" class="portfolio-wrapper"> 
          <!-- Item Details --> 
          <div class="protfolio-caption-activeWrap"> 
           <!-- Centered Details --> 
           <div class="center-details"> 
            <div class="details"> 
             <!-- Item Name --> 
             <h2 class="name" ng-model="jobtitle"> 
              Winter 
             </h2> 
             <p><b>Job ID#</b> <span class="jobid" ng-model="jobid">2017-01</span></p> 
             <p ng-click="set(data)" class="btn btn-sm">Apply</p> 
             <!-- Tags --> 
            </div> 
           </div> 
           <!-- End Center Details Div --> 
          </div> 
          <!-- End Item Details --> 
         </a> 
        </div> 
</div> 

HTML（データをコピーする場合）

<div ng-app="careerApp" ng-controller="JobSelection"> 
            <form class="tsf-step-content"> 
             <label>{{jobtitle}}</label> 
             <label>{{jobid}}</label> 
             </form> 
</div> 

角度スクリプト

var careerApp = angular.module("careerApp", []); 
careerApp.factory('myService', function() { 
    var savedData = {} 
    function set(data) { 
     savedData = data; 
    } 
    function get() { 
     return savedData; 
    } 

    return { 
     set: set, 
     get: get 
    } 

}); 

careerApp.controller("JobList", ['$scope', function ($scope) { 
    myService.set($scope.jobtitle); 
}]); 
careerApp.controller("JobSelection", ['$scope',function ($scope) { 
    $scope.jobtitle = myService.get(); 
}]); 

Answer 1

あなたは宣言に間違っていますng-appを2つの異なるページに2回表示します。データを渡すより簡単な方法は$ rootScopeに格納することです。

Answer 2

あなたは両方のhtmlでのNGアプリを指定している。この

//Controller foo 

app.controller('fooController', ['$scope', 'foobarService', function($scope, foobarService){ 
$scope.StoreId = function(id){ 
    foobarService.setId(id); 
}]); 

//foobarService 
app.service('foobarService', [function(){ 
    var id; 

    this.setId = function(id){ 
     id = id; 
    } 

    this.getId = function(){ 
     return id; 
    } 
}]); 

//Controller bar 
app.controller('barController', ['$scope', 'foobarService', function($scope, foobarService){ 
    $scope.id = foobarService.getId(); 
}]);