別のコントローラのコントローラスコープにアクセスします。

角度が新しいです。私は、あなたがデータ転送のための角度のサービスを使用することによって、この目的を達成することができ、事前のおかげ別のコントローラのコントローラスコープにアクセスします。

<body ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
     First Name: <input type="text" ng-model="fName"><br><br> 
     Last Name : <input type="text" ng-model="lName"> 
     <p ng-bind="fullName()"></p> 
    </div> 
    <div ng-controller="mySecondCtrl"> 
     Father Name: <input type="text" ng-model="fathName"><br><br> 
     Mother Name:<input type="text" ng-model="mothName"> 
     <p> 
     <strong>Paren name:</strong> 
     <span>Mr.{{fathName}},</span> 
     <span>Ms.{{mothName}}</span> 
     </p> 
    </div> 

    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript"> 
     var app = angular.module("myApp",[]); 

     app.controller("myCtrl",myFunction); 
     function myFunction($scope){ 
      $scope.fName = ""; 
      $scope.lName = ""; 
      $scope.fullName = function(){ 
       return $scope.fName +" "+ $scope.lName 
      } 
     } 
     app.controller("mySecondCtrl",mySecondFunction); 
     function mySecondFunction($scope){ 
      //I want to access the fullName() function here 
     } 
    </script> 
</body>

出典

2017-03-10 Srikrushna Pal

関係2のコントローラで '$ braodcast'と' $ on'関数を使うか、コントローラ間で 'factory'を使ってデータを共有してください –

thanks [Matthew Walton]（http://stackoverflow.com/users/241544/matthew-walton ） –

あなたはAngularJS 2を学んでいるはずですが、GoogleがAngularJS 2でより良い方法を見つけたことを明確に述べています。 –

、私は簡単な方法と、これを行うために利用可能な方法を知りたい最初別に1つのコントローラスコープにアクセスしたいです。データ転送サービスにmyCtrl、$scope.fullNameの方法を設定する必要があります。

これで、サービスは変数内にメソッドを保持します。今すぐ2番目のコントローラmySecondCtrlから、データ転送サービスのメソッドにアクセスします。

実際には、最初のコントローラのメソッドを2番目のコントローラから呼び出す必要があります。ここに実例があります。

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

 

 
<body ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
     First Name: 
 
     <input type="text" ng-model="fName"> 
 
     <br> 
 
     <br> Last Name : 
 
     <input type="text" ng-model="lName"> 
 
     <p ng-bind="fullName()"></p> 
 
    </div> 
 
    <div ng-controller="mySecondCtrl"> 
 
     Father Name: 
 
     <input type="text" ng-model="fathName"> 
 
     <br> 
 
     <br> Mother Name: 
 
     <input type="text" ng-model="mothName"> 
 
     <p> 
 
      <strong>Paren name:</strong> 
 
      <span>Mr.{{fathName}},</span> 
 
      <span>Ms.{{mothName}}</span> 
 
     </p> 
 
     <p><button ng-click="getDetails()">Get Details</button></p> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
     var app = angular.module("myApp", []); 
 

 
     app.controller("myCtrl", myFunction); 
 

 
     function myFunction($scope, DataTransfer) { 
 
      $scope.fName = ""; 
 
      $scope.lName = ""; 
 
      $scope.fullName = function() { 
 
       //console.log('fullname method called'); 
 
       return $scope.fName + " " + $scope.lName 
 
      } 
 
      //Setting the method to a data transfer service 
 
      DataTransfer.setUserDetails($scope.fullName); 
 
     } 
 

 

 

 
     app.controller("mySecondCtrl", mySecondFunction); 
 

 
     function mySecondFunction($scope, DataTransfer) { 
 
      //I want to access the fullName() function here 
 
      $scope.getDetails = function() { 
 
       console.log('Going to call fullname method from second controller'); 
 
       //Reading the method in first controller inside the second one 
 
       var functionItem = DataTransfer.getUserDetails(); 
 
       var details = functionItem(); 
 
       console.log(details); 
 
      } 
 
     } 
 

 
     app.factory('DataTransfer', function() { 
 

 
      var data = {}; 
 

 
      return { 
 
       getUserDetails: function() { 
 
        return data; 
 
       }, 
 
       setUserDetails: function (UserDetails) { 
 
        data = UserDetails; 
 
       } 
 
      }; 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

修飾

ここ

方法は、第二コントローラ（functionItem）に可変で受信され、そのメソッドが呼び出され、応答データが変数に保存され（details）。変数detailsは、最初のコントローラから取得したユーザの詳細を保持します。

出典

2017-03-10 09:30:09 Nitheesh

私はどのように二番目にフルネームを取得しますか？ –

@SrikrushnaPal私は答えを更新しました。 – Nitheesh

ありがとう@Nitheesh –

別のコントローラのコントローラスコープにアクセスします。

答えて

関連する問題