• angular 控件间的通信


    先引入 

    设置meta元素 

    http://blog.sina.com.cn/s/blog_51048da70101cgea.html

      //设置 虚拟窗口的大小等于设备的大小

      <meta name="viewport" content="width=device-width, user-scalable=no,init-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">

      //格式检测

          <meta name="format-detection" content="telephone=no">
          <meta name="format-detection" content="email=no">

      //引用 angular.min.js 

        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    //代码如下

    <!doctype html>
    <html lang="en" ng-app="myapp">
    <head>
        <meta charset="UTF-8">
        <title>控制器间的通信</title>
    </head>
    <body>
        <div ng-controller="main">
            main controller
            <div ng-controller="child">
                child controller
            </div>
            <button ng-click="broadcast()">$broadCast</button>
        </div>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">

        var myapp=angular.module("myapp",[]);
            myapp.controller("main",function($scope,$rootScope){
                var name = "var main->child";
                $scope.name="main";
                $rootScope.age = 18;  //ng-app  全局

                //父级发送接收信息事件   
                $scope.$on("childData",function(e,d){   //event事件  data数据

                    console.log(e.targetScope)   //获得子控件的 $scope
                })
                $scope.broadcast=function(){
                    $scope.$broadcast("mainData",name)
                }

        
            })
            myapp.controller("child",function($scope,$rootScope){  //$scope  作用域
                var name = "var name->child";
                $scope.name="child";
                console.log($rootScope) // 18

                //子级控件 收发信息事件
                $scope.$on("mainData",function(e,d){
                    console.log(d)
                })
                $scope.$emit("childData","发送给父控件")


            })

    </script>
    </body>
    </html>


    //访问不同作用域的变量
    //方法一
    //知识点: $scope是当前controller控制器下的作用域
            //  $rootScrope  ng-app  下的作用域
    //方法二
    //  $on 监听事件     $emit子控件向父控件发送事件    $broadcast 向子控件发送信息时需谨慎(所有的子控件都可以收到)

    //e.targetScope  获得事件发送的主体scope作用域

      

  • 相关阅读:
    java语言基础--标识符、关键字
    #考研碎碎念#3
    #考研笔记#计算机之word问题
    #考研#计算机文化知识1(局域网及网络互联)
    #学习笔记#jsp
    #学习笔记#JSP数据交互
    考研随笔2
    考研随笔1
    几个人
    全局变量
  • 原文地址:https://www.cnblogs.com/baota/p/6550273.html
Copyright © 2020-2023  润新知