zoukankan      html  css  js  c++  java
  • Angular $broadcast和$emit和$ond实现父子通信

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
    <meta charset="UTF-8">
    <script src="js/angular.js"></script>
    <title></title>
    </head>
    <body>

    <div ng-controller="parentCtrl">
    <button ng-click="toChild()">
    向child传值
    </button>

    <div ng-controller="childCtrl">
    <p>{{data}}</p>
    <button ng-click="toParent()">向parent传值</button>
    </div>

    </div>


    <script>
    var app = angular.module('myApp', ['ng']);

    app.controller('parentCtrl', function ($scope) {
    $scope.toChild = function () {
    //通过事件传值 约定事件名称:toChildEvent
    $scope.$broadcast(
    'toChildEvent',
    ' msg from parent')
    }

    //绑定toParentEvent事件的处理函数
    $scope.$on('toParentEvent',
    function (event, result) {
    console.log(result);
    })

    });

    app.controller('childCtrl', function ($scope) {
    //绑定事件 $on
    $scope.$on('toChildEvent',
    function (event, result) {
    console.log(arguments);
    $scope.data = result;
    });

    $scope.toParent = function () {
    //向父级元素通过事件传值 $emit 约定:toParentEvent
    $scope.$emit(
    'toParentEvent',
    'msg to my parent'
    );
    }

    });

    </script>
    </body>
    </html>
  • 相关阅读:
    fabric 网络操作中遇到的问题
    springBoot项目启动初始化数据
    行为验证码AJ-Captcha
    RestControllerAdvice注解无效问题
    记录美团一面问题
    关于springMVC
    作业08-集合
    选择排序
    Centos7 使用Minikube搭建Kubernetes集群
    Vscode 配置 Go语言插件
  • 原文地址:https://www.cnblogs.com/dianzan/p/7284246.html
Copyright © 2011-2022 走看看