zoukankan      html  css  js  c++  java
  • 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:'<div><input type="text" ng-model="txt"/><div>{{txt}}</div></div>',
            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);
        });
    });
  • 相关阅读:
    LeetCode 189. Rotate Array
    LeetCode 965. Univalued Binary Tree
    LeetCode 111. Minimum Depth of Binary Tree
    LeetCode 104. Maximum Depth of Binary Tree
    Windows下MySQL的安装与配置
    LeetCode 58. Length of Last Word
    LeetCode 41. First Missing Positive
    LeetCode 283. Move Zeroes
    《蚂蚁金服11.11:支付宝和蚂蚁花呗的技术架构及实践》读后感
    删除docker下的镜像
  • 原文地址:https://www.cnblogs.com/guozhe/p/7462281.html
Copyright © 2011-2022 走看看