angular中两个控制器直接传值

最新推荐文章于 2020-06-18 15:21:29 发布

weixin_39407291

最新推荐文章于 2020-06-18 15:21:29 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS

本文链接：https://blog.youkuaiyun.com/weixin_39407291/article/details/98058169

angularJS 专栏收录该内容

28 篇文章

订阅专栏

这篇博客展示了如何在AngularJS应用中通过一个服务实现两个控制器之间的数据通信。作者提供了一个简单的demo，说明如何使用sourceManageFactory服务进行数据设置和获取。通过sourceManageFactory.setter()设置值，然后在另一个控制器中用sourceManageFactory.getter()接收值。博客内容是对SegmentFault上相关问题的回答，感谢了提出和解答问题的社区成员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是简单的做了一个demo：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="inputCtrl">
            <input type="text" ng-model="value1" />
            <input type="text" ng-model="value2" />
            <input type="text" ng-model="value3" />
            <button ng-click="setValue()">Add</button>
        </div>
        <div ng-controller="getCtrl">
            <div>{{ value1 }}</div>
            <div>{{ value2 }}</div>
            <div>{{ value3 }}</div>
            <button ng-click="getValue()">Get</button>
        </div>
    </div>
	
    <script type="text/javascript" >
    	angular.module('myApp', [])
            .factory('factory_getValue', function () {
                var myData = {};
                function _getter() {
                    console.log(myData);
                    return myData;
                }
                function _setter( a,b,c ) {
                    myData = {
                        a:a,
                        b:b,
                        c:c
                    }
                }
                return {
                    getter: _getter,
                    setter: _setter
                };
            })
            .controller('inputCtrl', function ( $scope, factory_getValue ) {
                $scope.setValue = function () {
                    factory_getValue.setter($scope.value1,$scope.value2,$scope.value3);
                }
            })
            .controller('getCtrl', function ( $scope, factory_getValue ) {
                $scope.getValue = function () {
                    // 点击按钮获取myData的值
                    $scope.value1 = factory_getValue.getter().a;
                    $scope.value2 = factory_getValue.getter().b;
                    $scope.value3 = factory_getValue.getter().c;
                }
            });
    </script>
</body>
</html>

在项目中使用：

在这里插入图片描述

传： sourceManageFactory.setter($scope.reseltArr);
收： $scope.reseltArr = sourceManageFactory.getter();