angularjs中的指令

時間 2019-12-07

原文原文鏈接

1、指令與控制器之間的交互：經過指令中的link函數來實現app

<body ng-app="myApp" ng-controller="myCtrl">
    <my-print>鼠標進入觸發打印</my-print>

    <script>
        angular.module('myApp',[])
        .controller('myCtrl',function($scope){
            $scope.print=function(){
                console.log('我是打印數據....')
            }
        })
        .directive('myPrint',function(){
            return{
                restrict:'E',
                link:function(scope,element,attrs){
                    element.bind('mouseenter',function(){
                        scope.print();
                    })
                }
            }
        })
    </script>
</body>

2、指令與指令間的交互：函數

<body ng-app="myApp">
    <div>
        <superman strength>動感超人--力量</superman>
    </div>
    <div>
        <superman strength speed>動感超人--力量+敏捷</superman>
    </div>
    <div>
        <superman strength speed light>動感超人--力量+敏捷+發光</superman>
    </div>

    <script>
        var app=angular.module('myApp',[])
        app.directive('superman',function(){
            return{
                restrict:'E',
                scope:{},
                controller:function($scope){
                    $scope.abilities=[];
                    this.addStrength=function(){
                        $scope.abilities.push('strength');
                    };
                    this.addSpeed=function(){
                        $scope.abilities.push('speed');
                    };
                    this.addLight=function(){
                        $scope.abilities.push('light');
                    }
                },
                link:function(scope,element,attrs){
                    element.bind('mouseenter',function(){
                        console.log(scope.abilities);
                    })
                }
            }
        })
        app.directive('strength',function(){
            return{
                require:'^superman',
                link:function(scope,element,attrs,supermanCtrl){
                    supermanCtrl.addStrength();
                }
            }
        })
        app.directive('speed',function(){
            return{
                require:'^superman',
                link:function(scope,element,attrs,supermanCtrl){
                    supermanCtrl.addSpeed();
                }
            }
        })
        app.directive('light',function(){
            return{
                require:'^superman',
                link:function(scope,element,attrs,supermanCtrl){
                    supermanCtrl.addLight();
                }
            }
        })
    </script>
</body>