AngularJs自定义指令大全
AngularJs自定义指令大全
天蓬小猪 发表于2年前
AngularJs自定义指令大全
  • 发表于 2年前
  • 阅读 171
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: AngularJs自定义指令大全
<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <hello><div>this is transclude </div></hello>
    <h1>自定义指令同controller交互</h1>
    <div ng-controller="myCtrl">
        <loader>加载数据</loader>
    </div>
    <h1>自定义指令通过属性进行调用</h1>
    <div ng-controller="myCtrl1">
        <loader1 howtoload="loadata1()">加载数据1</loader1>
    </div>
    <div ng-controller="myCtrl2">
        <loader1 howtoload="loadata2()">加载数据2</loader1>
    </div>

    <h1>指令之间的操作</h1>
    <superman>动感超人什么都没有</superman><br>
    <superman light>动感超人 有光</superman>
    <br/>
    <superman light speed>动感超人 有光 有速度</superman>
    <br/>
    <superman light speed strength>动感超人 有光 有速度 有力量</superman>
    <br/>
    <h1>scope绑定策略</h1>
    <ul>
        <li>@ 传递字符串</li>
        <li>= 与父作用域进行双向绑定的</li>
        <li>& 调用父作用域的函数方法</li>
    </ul>
    <div ng-controller="drinkCtrl">
        <drink flavor="{{flavor}}"></drink>
        <hr/>
        CTRL:
        <input type="text" ng-model="flavor"/><br/>
        dirctive:
        <drink1 flavor="flavor"></drink1>
    </div>
    <hr/>
    <div ng-controller="greetingCtrl">
        <greeting greet="sayhello(name)"></greeting>
    </div>
</div>
<script src="../../lib/angularjs/angular.min.js"></script>
<script>
    var myModule = angular.module("myModule",[]);

    /**
     * myModule.run(function($templateCache){
     *
     *      $templateCache.put("hello.html","<div>hello everyOne</div>")
     * }
     * )
     */
    //myModule.directive("hello",function($templateCache){
    myModule.directive("hello",function(){
        return {
            restrict:"AEMC",
            template:"<div>Hi EveryOne!<div ng-transclude=''></div></div>",
            //transclude:true,
            //templateUrl:"hello.html",
            //template:$templateCache.get("hello.html"),
            //replace:true
            transclude:true
        }
    });
    myModule.controller("myCtrl",function($scope){
        $scope.loadata = function(){
            console.log("load data");
        }
    });
    myModule.controller("myCtrl1",function($scope){
        $scope.loadata1 = function(){
            console.log("load data1");
        }
    });
    myModule.controller("myCtrl2",function($scope){
        $scope.loadata2 = function(){
            console.log("load data2");
        }
    });
    myModule.directive("loader",function(){
        return {
            restrict:"AE",
            link:function(scope,element,attr){
                element.bind("mouseenter",function(){
//                   scope.loadata1();
                    scope.$apply("loadata()");
                });
            }
        }
    });
    myModule.directive("loader1",function(){
        return{
            restrict:"E",
            link:function(scope,element,attr){
                element.bind("mouseenter",function(){
//                    scope.loadata1();
//                    console.log("test...");
                    scope.$apply(attr.howtoload);
                });
            }
        }
    });
    myModule.directive("superman",function(){
        return {
            scope:{},//指定独立作用域
            restrict:"E",
            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);
                });
            }
        }
    });
    myModule.directive("strength",function(){
        return{
            require:"^superman",
            link:function(scope,element,attr,supermanCtrl){
                supermanCtrl.addStrength();
            }
        }
    });
    myModule.directive("speed",function(){
        return{
            require:"^superman",
            link:function(scope,element,attr,supermanCtrl){
                supermanCtrl.addSpeed()
            }
        }
    });
    myModule.directive("light",function(){
        return{
            require:"^superman",
            link:function(scope,element,attr,supermanCtrl){
                supermanCtrl.addLight();
            }
        }
    });
    myModule.controller("drinkCtrl",function($scope){
        $scope.flavor="baiwei + liquan";
    })
    myModule.directive("drink",function(){
        return{
            restrict:"AE",
            template:"<div>{{flavor}}</div>",
            scope:{
                flavor:"@"//传递字符串对象
            }
//            link:function(scope,element,attr){
//                scope.flavor = attr.flavor;
//            }
        }
    })
    myModule.directive("drink1",function(){
        return{
            restrict:"AE",
            template:"<input type='text' ng-model='flavor'>",
            scope:{
                flavor:"="//与父对象进行双向绑定
            }
//            link:function(scope,element,attr){
//                scope.flavor = attr.flavor;
//            }
        }
    });
    myModule.controller("greetingCtrl",function($scope){
        $scope.sayhello=function(name){
            alert("Hello "+ name);
        }
    });
    myModule.directive("greeting",function(){
        return {
            restrict:"AE",
            scope:{
                greet:"&"
            },
            template:"<input type='text' ng-model='userName'><br/>"+
                    "<button ng-click='greet({name:userName})'>测试{{userName}}</button>"
        }
    });
</script>
</body>
</html>

共有 人打赏支持
天蓬小猪
粉丝 486
博文 40
码字总数 41514
作品 1
×
天蓬小猪
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: