angular 控件间的通信

先引入

设置meta元素

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

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

　　//格式检测

　　//引用 angular.min.js

//代码如下

<!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>

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作用域

巴特西

angular 控件间的通信

最新文章

热门文章