zoukankan      html  css  js  c++  java
  • $on , $emit , $broadcast , $apply

    $scope.$on('事件名称',function(event,data){

      //监听事件

    });

    $scope.$emit('事件名称','传递的数据');//子元素向父元素发送事件请求,传递数据;

    $scope.$broadcast('事件名称','传递的数据');//父元素向子元素发送事件请求,传递数据;

    $scope.$apply();//当数据值发送改变时,及时更新数据;

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body ng-app="firstApp">
        <div ng-controller="MyController">
            <h1>This is the parent scope:{{answer}}</h1>
            <div ng-controller="MyController">
                <h2>This scope inherits from the parent scope</h2>
                This prints '42':{{answer}}
            </div>
        </div>
        <div ng-controller="allEvent">
            接收子元素传递给父元素的值:{{all}}
            <div ng-controller="parentEvent">
                <span ng-click="parentClick()">父级点击,向子级传数据</span>
                <div ng-controller="childEvent">
                    它是parentEvent的子级 {{answer}}
                </div>
            </div>
            <div ng-click="clickAll">点击向allEvent发送数据</div>
        </div>
    </body>
    <script src="common/angular.js"></script>
    <script>
        var app=angular.module('firstApp',[]);
    
        app.controller('MyController',function($scope){
            $scope.answer = 42;
        }).controller('parentEvent',function($scope){
            $scope.parentClick = function (){
                $scope.$broadcast('sendChild',12);
                $scope.$emit('sendAll','你好呀,我是子元素');
            }
        }).controller('childEvent',function($scope){
            $scope.$on('sendChild',function (event , data){
                console.log('child');
                console.log(event);
                console.log(data);
                $scope.answer = data;
            })
    
        }).controller('allEvent',function($scope){
            $scope.$on('sendAll',function (event , data){
                console.log('child');
                console.log(event);
                console.log(data);
                $scope.all = data;
            })
        })
    </script>
    </html>
    
  • 相关阅读:
    background之你不知道的background-position
    ES6学习笔记(二)
    ES6学习笔记(一)
    将博客搬至CSDN
    Mongodb的性能优化问题
    使用AngularJS实现的前后端分离的数据交互过程
    输出JS代码中的变量内容
    程序生成word与PDF文档的方法(python)
    python 2.7安装某些包出现错误:"libxml/xmlversion.h:没有那个文件或目录"
    Linux中安装配置spark集群
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/9882403.html
Copyright © 2011-2022 走看看