zoukankan      html  css  js  c++  java
  • angular controller与directive相互引用

    /**
     * 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);
        });
    });
    

      

  • 相关阅读:
    spring 整合 shiro框架
    Kafka常见问题及解决方法
    设计模式之解释器模式规则你来定(二十五)
    设计模式之原型模式简单即复杂(二十四)
    设计模式之访问者模式层次操作(二十三)
    设计模式之状态模式IFORNOIF(二十二)
    设计模式之职责链模式永不罢休(二十一)
    设计模式之组合模式透明实用(二十)
    设计模式之享元模式高效复用(十九)
    设计模式之迭代器模式解析学习源码(十八)
  • 原文地址:https://www.cnblogs.com/guozhe/p/7448474.html
Copyright © 2011-2022 走看看