zoukankan      html  css  js  c++  java
  • 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作用域

      

  • 相关阅读:
    kubernetes对象之secrets
    kubernetes对象之cronjob
    Kubernetes对象之ReplicaSet
    详谈kubernetes更新-2
    详谈kubernetes滚动更新-1
    设计模式-抽象工厂模式
    深入JVM-Class装载系统
    设计模式-工厂方法模式
    设计模式-单例模式
    设计模式-6大设计原则
  • 原文地址:https://www.cnblogs.com/baota/p/6550273.html
Copyright © 2011-2022 走看看