Angular Js：Button单击以从两个控制器获取数据并在第三个显示它

我是AngularJS的新手。我有一个以下功能，我有一个名字字段和姓氏字段（在两个不同的控制器），然后点击一个按钮，我想在第三个控制器中显示FullName（名字+姓氏）。请建议我该怎么做。这里是我的代码：Angular Js：Button单击以从两个控制器获取数据并在第三个显示它

<html> 
 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp"> 
 

 
     <h2>Controller 1</h2><br /> 
 
\t \t <div ng-controller="FirstController"> 
 
\t \t \t <input type="text" ng-model="Data.FirstName"> 
 
\t \t \t <br>FirstName is : {{Data.FirstName}}</strong> 
 
\t \t </div> 
 
\t \t <hr> 
 
     <h2>Controller 2</h2><br /> 
 
\t \t <div ng-controller="SecondController"> 
 
      <input type="text" ng-model="Data.LastName"> 
 
\t \t \t <br>LastName is : {{Data.LastName}}</strong> 
 
\t \t </div> 
 
     <h2>Controller 3</h2><br /> 
 
     <div ng-controller="ThirdController"> 
 
      <button ng-click="getName(Data)">Get full Name</button> 
 
\t \t \t FullName is : {{getName(Data)}} 
 
\t \t </div> 
 

 
\t </div> 
 
\t </div> 
 

 
    <script> 
 
     var myApp = angular.module('myApp', []); 
 

 

 
     myApp.factory('Data', function() { 
 
      return { FirstName: '',LastName:'' }; 
 
     }); 
 

 
     myApp.controller('FirstController', function ($scope, Data) { 
 
      $scope.Data = Data; 
 
     }); 
 

 
     myApp.controller('SecondController', function ($scope, Data) { 
 
      $scope.Data = Data; 
 
     }); 
 
     myApp.controller('ThirdController', function ($scope, Data) { 
 
      $scope.Data = Data; 
 
      $scope.getName = function (Data) 
 
      { 
 
       $scope.Data = Data; 
 
      } 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

来源

2015-02-10 Raghav

你是不是正确注入您服务到您的控制器 - 看到这个fiddle

同时将您的getName（）调用删除数据PARAM：

<button ng-click="getName()">

来源

2015-02-10 09:05:02 mindparse

谢谢！它的工作就像一个魅力 – Raghav 2015-02-10 12:24:11

Angular Js：Button单击以从两个控制器获取数据并在第三个显示它

回答

相关问题