Angularjs 指令間的交互

時間 2019-11-24
原文原文鏈接
原文連接：http://www.cnblogs.com/xing901022/p/4290411.html javascript
 <!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        <div>
            <superman>nothing!</superman>
            <superman strength >strength!</superman>
            <superman strength speed >strength speed!</superman>
            <superman strength speed light >strength speed light!</superman>
        </div>
        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);
            myAppModule.directive("superman",function(){
                return{
                    scope:{},
                    restrict:'AE',
                    transclude:true,
                    template:"<div><div ng-transclude></div></div>",
                    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,attr){
                        element.bind("mouseenter",function(){
                            console.log(scope.abilities);
                        });
                    }
                }
            });
            myAppModule.directive("strength",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addStrength();
                    }
                }
            });
            myAppModule.directive("speed",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addSpeed();
                    }
                }
            });
            myAppModule.directive("light",function(){
                return{
                    require:'^superman',
                    link:function(scope,element,attr,supermanCtrl){
                        supermanCtrl.addLight();
                    }
                }
            });
        </script>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。