AngularJs自定義指令大全

時間 2019-11-09
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。