Angular Js:单击按钮可从两个控制器获取数据并在第三个控制器中显示

拉加夫

我是AngularJS的新手。我有以下功能,其中我有一个FirstName字段和LastName字段(在两个不同的控制器中),然后单击按钮,我想在第三个Controller中显示FullName(名字+姓氏)。请建议我该怎么做。这是我的代码:

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

	</div>
	</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>

心智分析

您没有将服务正确注入到控制器中-请参阅此小提琴

还要从getName()调用中删除数据参数:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

连接两个表并在cakephp的第三个控制器中显示数据

来自分类Dev

如何在Angular.js中合并两个控制器?

来自分类Dev

为什么在Angular JS中不能使用两个控制器?

来自分类Dev

Angular服务未在两个控制器之间存储数据

来自分类Dev

这两个angular js控制器有什么区别?

来自分类Dev

在两个控制器中共享的Angular JS Factory不会更新值

来自分类Dev

如何在angular.js的一个控制器中存储来自两个不同网页的数据

来自分类Dev

使用单个控制器控制两个Partials时未加载Angular CSS文件

来自分类Dev

在Angular中,如何遍历两个数组以填充第三个数组?

来自分类Dev

有两个共享相同DOM元素的Angular控制器是不好的做法吗?

来自分类Dev

Angular服务,它从两个控制器编译对象以创建“ Content Feed”

来自分类Dev

让两个控制器通过服务(Angular2)相互通信的正确方法

来自分类Dev

如何在Angular JS的子控制器中访问父控制器数据

来自分类Dev

Angular JS:控制器属性未在html中显示

来自分类Dev

Angular.js:在控制器中获取元素

来自分类Dev

Angular JS从控制器中的工厂访问$ http数据

来自分类Dev

获取一个Angular控制器以提供数据以进行角度平移

来自分类Dev

Angular Material md-switch并在一个控制器中搜索输入到另一控制器

来自分类Dev

在Angular中的另一个控制器中使用一个控制器

来自分类Dev

从Angular中的另一个控制器刷新一个控制器

来自分类Dev

如何在Angular JS中的另一个控制器中调用/触发一个控制器功能

来自分类Dev

Angular.js中是否可以有一个异步控制器构造函数?

来自分类Dev

第二个控制器不在Angular JS中执行?

来自分类Dev

Angular JS-单击负载控制器功能

来自分类Dev

Angular js中从一个控制器到另一个控制器的调用方法

来自分类Dev

在Angular js中从一个控制器到另一个控制器的调用方法

来自分类Dev

在另一个控制器中调用 angular js 1 一个控制器不工作

来自分类Dev

Angular Js多次调用控制器方法并在视图中显示输出

来自分类Dev

这两个Angular控制器之间在功能上有什么区别吗

Related 相关文章

  1. 1

    连接两个表并在cakephp的第三个控制器中显示数据

  2. 2

    如何在Angular.js中合并两个控制器?

  3. 3

    为什么在Angular JS中不能使用两个控制器?

  4. 4

    Angular服务未在两个控制器之间存储数据

  5. 5

    这两个angular js控制器有什么区别?

  6. 6

    在两个控制器中共享的Angular JS Factory不会更新值

  7. 7

    如何在angular.js的一个控制器中存储来自两个不同网页的数据

  8. 8

    使用单个控制器控制两个Partials时未加载Angular CSS文件

  9. 9

    在Angular中,如何遍历两个数组以填充第三个数组?

  10. 10

    有两个共享相同DOM元素的Angular控制器是不好的做法吗?

  11. 11

    Angular服务,它从两个控制器编译对象以创建“ Content Feed”

  12. 12

    让两个控制器通过服务(Angular2)相互通信的正确方法

  13. 13

    如何在Angular JS的子控制器中访问父控制器数据

  14. 14

    Angular JS:控制器属性未在html中显示

  15. 15

    Angular.js:在控制器中获取元素

  16. 16

    Angular JS从控制器中的工厂访问$ http数据

  17. 17

    获取一个Angular控制器以提供数据以进行角度平移

  18. 18

    Angular Material md-switch并在一个控制器中搜索输入到另一控制器

  19. 19

    在Angular中的另一个控制器中使用一个控制器

  20. 20

    从Angular中的另一个控制器刷新一个控制器

  21. 21

    如何在Angular JS中的另一个控制器中调用/触发一个控制器功能

  22. 22

    Angular.js中是否可以有一个异步控制器构造函数?

  23. 23

    第二个控制器不在Angular JS中执行?

  24. 24

    Angular JS-单击负载控制器功能

  25. 25

    Angular js中从一个控制器到另一个控制器的调用方法

  26. 26

    在Angular js中从一个控制器到另一个控制器的调用方法

  27. 27

    在另一个控制器中调用 angular js 1 一个控制器不工作

  28. 28

    Angular Js多次调用控制器方法并在视图中显示输出

  29. 29

    这两个Angular控制器之间在功能上有什么区别吗

热门标签

归档