AngularJS ——自定义指令deme

作者: Jamesholy | 来源:发表于2017-03-23 21:49 被阅读8次

<html>

    <head>
        <meta charset="utf-8">
        <title>指令 自定义指令</title>
        <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>

    <body ng-app='myApp' >

        <chaoren CanFly>aaa</chaoren>
    
        <script> 
            var mainApp = angular.module("myApp", []);
            
            mainApp.directive("chaoren", function() {
                return {
                    scope : {}, 
                    restrict: "AE",
                    template: "<h1>我是超人</h1>",
                    controller: function($scope){
                        $scope.list = [];
                        this.addCanFly = function(){
                            $scope.list.push("fly");
                            
                        }
                    },
                    link:function(scope,ele,attrs){
                        ele.bind("mouseenter",function(){ 
                            console.log(scope.list);
                            alert("我会" +  scope.list[0]);
                        });
                    }
                } 
            }); 
            mainApp.directive("canfly",function(){ //这里canfly一定要用小写 
                return{
                    require:'^chaoren',
                    link: function(scope,ele,attr,superctr){
                        superctr.addCanFly();
                    }
                }
            });
        
        </script> 

    </body>

</html>