angularjs控制器间传值的五种方案

最新推荐文章于 2021-07-30 16:08:08 发布

Steven--Lee

最新推荐文章于 2021-07-30 16:08:08 发布

阅读量2.4k

点赞数 1

分类专栏： Angularjs 文章标签： angularjs 控制器间传值 emitted broadcast

本文链接：https://blog.csdn.net/momDIY/article/details/78882945

版权

Angularjs 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

控制器间传值

1. 父作用域向子作用域传值

- broadcasted ：从父级作用域广播至子级 scope
- $on()捕获事件

<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>

2. 子作用域向父作用域传值

- emitted ：从子级作用域往上发射到父级作用域(相当于冒泡)
- $on()捕获事件

<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>

3.- 平级作用域resolve传值

- 使用resolve传值，传递的是一个对象
- 获取时需要将传递的对象的名注入后使用

resolve: {
    academicInfo: function () {
        if (type === 'add') {
            return null
        } else if (type === 'edit') {
            return academic
        }
    }
}

4. 使用根作用域（$rootscope）

- $rootscope相当于一个全局变量，在同一个angular.module("exampleApp")下可用
- $rootscope需要注入到控制器后再使用

5. 使用service服务

- 在同一个module下，不同的控制器可以访问同一个service服务
- 通过service服务里值的存储传递可实现控制器传值

完整demo：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Controllers</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
            .service("ZipCodes", function($rootScope) {
                return {
                    setZipCode: function(type, zip) {
                        this[type] = zip;
                        $rootScope.$broadcast("zipCodeUpdated", {
                            type: type, zipCode: zip 
                        });
                    }
                }
            })
            .controller("simpleCtrl", function ($scope, ZipCodes) {

                $scope.$on("zipCodeUpdated", function (event, args) {
                    $scope[args.type] = args.zipCode;
                });

                $scope.setAddress = function (type, zip) {
                    ZipCodes.setZipCode(type, zip);
                    console.log("Type: " + type + " " + zip);
                }

                $scope.copyAddress = function () {
                    $scope.zip = $scope.billingZip;
                }
            });
    </script>

</head>
<body>
    <div class="well" ng-controller="simpleCtrl">
        <h4>Billing Zip Code</h4>
        <div class="form-group">
            <input class="form-control" ng-model="zip">
        </div>
        <button class="btn btn-primary" ng-click="setAddress('billingZip', zip)">
            Save Billing
        </button>
    </div>
    <div class="well" ng-controller="simpleCtrl">
        <h4>Shipping Zip Code</h4>
        <div class="form-group">
            <input class="form-control" ng-model="zip">
        </div>
        <button class="btn btn-primary" ng-click="copyAddress()">
            Use Billing
        </button>
        <button class="btn btn-primary" ng-click="setAddress('shippingZip', zip)">
            Save Shipping
        </button>
    </div>
</body>
</html>