angular数据传递练习

父级像下级传送数据

1	`$scope.$broadcast必须在一个函数中才有效果。`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS broadcast译为广播，即上级传递下级。</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
</head>
<body ng-app='app'>
    <div ng-controller="parent">
        Parent: {{mydata}}
        <input type="text" ng-model="mydata">
        <button ng-click="sendData()">点击数据</button>
        <div ng-controller="child">
            {{change}} Child: {{child}}
        </div>
    </div>
 <script>
    angular.module("app", [])
    .controller("child", function($scope) {
        $scope.$on("parentChange", function(e, m) { //获取传过来的值
            console.log(e,"元素")
            console.log(m,"数据值")
            $scope.change = "changed";
            $scope.child = m;
        })
    })
    .controller("parent", function($scope) {
        // $scope.$watch("mydata", function(n, o) {
        //     console.log(n,"新值")
        //     console.log(o,"旧值")
        //     if (n == o) {
        //         return;
        //     }
        $scope.mydata="初始化值";  
         $scope.sendData=function(){ //$scope.$broadcast必须在一个事件中才有效果。
            $scope.$broadcast("parentChange", $scope.mydata) //上级向下级传值
         }
          
       // })
    })
    </script>
</body>
</html>

　　效果图

未点击前

点击后

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
  <script>
    var myApp = angular.module("myApp", []);
    //控制器Parent
    myApp.controller("Parent", function ($scope, $window) {
        $scope.topData = "我是顶级";
      $scope.name = "Parent";
      //$on用于事件
      $scope.$on("FromSelf", function (event, data) {
         $scope.topData=data.description+'-----FromSelf';
        $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description + event.targetScope.name);
      }); 
      $scope.$on("FromChild", function (event, data) {
        $scope.topData=data.description+'-----FromChild';
        $window.alert("当前节点" + event.currentScope.name + ",截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
      });
 
    });
    //控制器Self
    myApp.controller("Self", function ($scope,$window) {

        $scope.middleData="我是中间数据";
      //button的传播事件
      $scope.toParent = function () {
        //注册一个向上传播的事件，eventName:'FromSelf', data:oneObject
        $scope.$emit("FromSelf", { divName: "Self", description: "向父传播数据" });
      };
      $scope.toChild = function () {
        //注册一个向下传播的事件，eventName:'FromSelf', data:oneObject
        $scope.$broadcast("FromSelf", { divName: "Self", description: "向子传播数据" });
      };
      $scope.name = "Self";
      $scope.$on("FromChild", function (event, data) {
        $scope.middleData="我是中间数据："+data.description+'-----FromChild';
        $window.alert("当前节点" + event.currentScope.name + "截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
      });
    });
    //控制器Child
    myApp.controller("Child", function ($scope, $window) {
      $scope.name = "Child";
      $scope.lastName="我是最里面的";
      //$on用于截获来自父级作用域的事件
      $scope.$on("FromSelf", function (event, data) {
        $scope.lastName = "我是最里面的:"+data.description+'-----FromSelf';
        $window.alert("当前节点" + event.currentScope.name +"截获到了来自" + data.divName + "的事件：" + event.name + "，它的作用是" + data.description);
      });
       
      //button的传播事件
      $scope.toTop = function () {
        //注册一个向上传播的事件，eventName:'FromChild', data:oneObject
        $scope.$emit("FromChild", { divName: "Child", description: "向上播数据" });
      };
 
    });
  </script>
 
</head>
<body>
  <form name="test"> 
  <div ng-controller="Parent">
    这里是父级Div
    <br>
    {{topData}}
    <hr>
    <div ng-controller="Self">
      这里是子级SelfDiv
      <hr>
      {{middleData}}
      <input type="button" ng-click="toParent()" value="向ParentDiv传播事件" />
      <input type="button" ng-click="toChild()" value="向ChildDiv传播事件" />
      <hr>
      <div ng-controller="Child">
       这里是子级ChildDiv <br>
       {{lastName}}
        <input type="button" ng-click="toTop()" value="向上传播事件" />
      </div>
    </div> 
    <hr>
    <div ng-controller="Brother"> 
      这里是Self的兄弟BrotherDiv
    </div> 
  </div>
  </form>
</body> 
</html>