angularjs中的指令

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_30768175

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/iagw/p/6875875.html

本文详细介绍了AngularJS中指令与控制器、指令与指令之间的交互方式。通过具体示例讲解了如何利用link函数实现指令间的通信，并展示了如何使用require属性来请求其他控制器。

一、指令与控制器之间的交互：通过指令中的link函数来实现

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

二、指令与指令间的交互：

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