angular|angular 组件之间传值
/** * Created by Administrator on 2017/8/28. */ var app =angular.module('app',[]); app.directive('food',function () { return { restrict:"E", scope:[], controller:function($scope){ $scope.foods=[]; this.addApple=function () { $scope.foods.push("apple"); } this.addOrange=function () { $scope.foods.push("orange"); } this.addBanana=function () { $scope.foods.push("banana"); } }, link:function ($scope,element,attrs) { element.bind("mouseenter",function () { console.log($scope.foods) }); } } }); app.directive('apple',function () { return { require:'food', link:function($scope,element,attrs,foodCtrl){ foodCtrl.addApple(); } } }); app.directive('orange',function () { return { require:'food', link:function($scope,element,attrs,foodCtrl){ foodCtrl.addOrange(); } } }); app.directive('banana',function () { return { require:'food', link:function($scope,element,attrs,foodCtrl){ foodCtrl.addBanana(); } } }); app.directive('hello',function(){ return { restrict:"E", replace:true, template:'{{txt}}', link:function($scope,element,attrs){ $scope.$watch('txt',function(newVal,oldVal){ if(newVal==="error"){ console.dir(element); element.attr("style","border:solid 1px red"); }else{ element.attr("style",""); } }); } } }); app.controller('OneSelfController',function($scope){ $scope.clkme=function(){ $scope.$broadcast('sendChild','我给子控制器传递数据'); $scope.$emit('sendParent','冒泡到父元素') } }).controller('ParentController',function($scope){ $scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件 console.log('OneSelfController传过来的',data,event.name,event); //事件名称：sendParent }); $scope.clkP=function(){ $scope.$broadcast('sendAllChild','让siblingsController接收到'); }}).controller('ChildController', function($scope){ $scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件 console.log('ChildCtrl', data,event.name,event); // 事件名称：sendChild }); }).controller('siblingsController', function($scope){ $scope.$on('sendAllChild',function(event,data) { console.log('值过来吧', data); }); //下面事件不会触发 $scope.$on('sendParent', function(event,data) { console.log('平级得不到值', data); }); $scope.$on('sendChild', function(event,data) { console.log('平级得不到值', data); }); });
【angular|angular 组件之间传值】转载于:https://www.cnblogs.com/guozhe/p/7462281.html
推荐阅读
- 闲杂“细雨”
- angular2内置管道
- 动态组件与v-once指令
- 对手戏
- vue组件中为何data必须是一个函数（）
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- 吸引力，一种奖赏
- cocosbcx白皮书解读（一）|cocosbcx白皮书解读（一）| 区块链如何统一开发者、发行商、用户之间的利益