• angular 控制器之前的通信和数据传输


    前端时间开发一个应用时,路由切换模块的时候需要传输数据。在网上查阅了写资料,细化了一些说明。一般有三种方式进行controller之间信息传递。

    一,利用js的继承关系去传递controller之间的data,

      我最早写在我自己的应用中的就是用的这种方法,我把第一视图的控制中获取到的data数据绑定到$rootScope上面

           当路由发生改变跳转到第二视图的时候,直接在用$rootScope.answer_sheet这个数据。其实严格意义上来说这并不是数据传输,只是利于js的继承关系,两个不同的子级共用父级的一个数据而已,而且两个子集都去改变父级的数据。这样操作并不好,会造成全局污染。

    二,利用angular的事件去传递信息$on,$emit,$boardcast这几个方式来实现。$emit表示向上传递(父级),$boardcast表示向下传递(子级),$on监听angular的事件,接受传递的数据。

    先讲讲这个三个方法的使用

    $emit()方法带有两个参数。
    1. name(字符串)
    要发出的事件名称。
    2. args(集合)
    一个参数的集合,作为对象传递到事件监听器中。
    $emit()方法返回了一个事件对象()。
    从监听器中发出的一切异常都会传递到$exceptionHandler服务中。

    实例scope.$emit('user:logged_in', scope.user);

    $boardcast和$emit用法一样 传两个参数 name和args

    scope.$broadcast('cart:checking_out', scope.cart);

    3,$on是angular中的监听事件

    要监听一个事件,我们可以使用$on()方法。这个方法为具有某个特定名称的事件注册了一
    个监听器。事件名称就是在Angular中触发的事件类型。
    例如,我们可以在路由变更过程被触发时,监听事件:
        scope.$on('$routeChangeStart',
        function(evt, next, current) {
          // 一个新的路由被触发了
        });
    不管什么时候事件$routeChangeStart(路由将要变更的时候,会广播这个事件)被触发,
    监听器(这个函数)都会被调用。

    根据这三个方法的特性,$emit和$boardcast绑定事件name并传输数据agrs,用$on监听绑定的事件并接受数据

    废话不多说直接上代码(可复制到编辑器运行)

    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>angular的通讯</title>
        <script src="http://zhouwei007.web3v.com/js/angular.js"></script>
    </head>
    <body>
        <div ng-controller="ParentCtrl">                <!--父级-->
            <div ng-controller="SelfCtrl">              <!--自己-->
                <a ng-click="click()">click me</a>
                <div ng-controller="ChildCtrl"></div>   <!--子级-->
            </div>
            <div ng-controller="BroCtrl"></div>         <!--平级-->
        </div>
    </body>
    <script>
        var app = angular.module('App', []);
        app.controller('SelfCtrl', function($scope) {
            $scope.click = function () {
                $scope.$broadcast('to-child', 'child','child22');
                $scope.$emit('to-parent', 'parent');
            }
        });
        app.controller('ParentCtrl', function($scope) {
            $scope.$on('to-parent', function(event,data) {
                console.log('ParentCtrl', data);       //父级能得到值
            });
            $scope.$on('to-child', function(event,data) {
                console.log('ParentCtrl', data);       //子级得不到值
            });
        });
        app.controller('ChildCtrl', function($scope){
            $scope.$on('to-child', function(event,data) {
                console.log('ChildCtrl', data);         //子级能得到值
            });
            $scope.$on('to-parent', function(event,data) {
                console.log('ChildCtrl', data);         //父级得不到值
            });
        });
        app.controller('BroCtrl', function($scope){
            $scope.$on('to-parent', function(event,data) {
                console.log('BroCtrl', data);          //平级得不到值
            });
            $scope.$on('to-child', function(event,data) {
                console.log('BroCtrl', data);          //平级得不到值
            });
        });
    </script>
    </html>

    三,通过自定服务传值

    angular服务的方式

    在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。

    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>angular的service传输数据</title>
        <script src="http://zhouwei007.web3v.com/js/angular.js"></script>
    </head>
    <body >
    <div ng-controller="MainCtrl">
        <input type="text" ng-model="test" />
        <div ng-click="change()">click me</div>
    </div>
    <div ng-controller="sideCtrl" ng-click="add()">
        '数据传输'+{{name}}
    </div>
    </body>
    <script>
        var app = angular.module('App', []);
        app.factory('instance', function(){
            return {};
        });
        app.controller('MainCtrl', function($scope, instance) {
            $scope.change = function() {
                instance.name = $scope.test;
            };
        });
        app.controller('sideCtrl', function($scope, instance) {
            $scope.add = function() {
                $scope.name = instance.name;
            };
        });
    </script>
    </html>
  • 相关阅读:
    春节不回家
    夜间突然发烧,无法入眠
    歌词写得真好
    近日看到网上许多BBS寻找SAP及ABAP程序的学习资料,本人深知学习的艰辛与不易,特贡献自己多年的学习资料,完全免费
    人生的真谛
    SMARTFORMS的调用方法(作者:曹玉平)
    自己给自己当医生
    将ocx添加到.NET
    AQtime + ocx/dll
    ActiveX:创建安装:
  • 原文地址:https://www.cnblogs.com/keaizhouzhou/p/5670196.html
Copyright © 2020-2023  润新知