AngularJS Directive的使用

(1)使用Directive自定义HTML组件

restrict

replace

template

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <!--<hello></hello>-->  <!--<div hello></div>-->  <div class="hello"></div>
        <div class="geek"></div>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

var app = angular.module('app',[]);

app.directive('hello',function () {
    return {
        /*restrict:'E', replace:true,//替换掉directive自定义的名称  template:'<div>Hello World</div>'*/   /*restrict:'A', link:function () {  alert("我在这里");  }*/   restrict:'C',link:function () {
            alert("我在这里");
        }
    }
})

app.directive('geek',function () {
    return {
        restrict:'C',link:function () {
            alert("我在这里geek");
        }
    }
})

(2)Directive和Controller之间的会话

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <div ng-controller="AppCtrl">
            <div enter="loadMoreData()">I'm here</div>
        </div>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

app.controller('AppCtrl',function ($scope) {
    $scope.loadMoreData = function () {
        alert("doing...");
    }
})

app.directive('enter',function () {
    return {
        restrict:'A',//默认也是A  link:function (scope,element,attrs) {
            element.bind('mouseenter',function () {
                scope.$apply(attrs.enter);
            })
        }
    }
})

----------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <food apple orange banana>所有食物</food><br/>
        <food apple orange>所有食物</food>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

app.directive('food',function () {
    return {
        restrict:'E',scope:{},controller:function ($scope) {
            $scope.foods=[];
            this.addApple = function () {
                $scope.foods.push("apple");
            }
            this.addOrange = function () {
                $scope.foods.push("orange");
            }
            this.addBanana = function () {
                $scope.foods.push("banana");
            }
        },link:function (scope,function () {
                console.log(scope.foods);
            });
        }
    }
})

app.directive('apple',function () {
    return {
        require:'food',attrs,foodCtrl) {
            foodCtrl.addApple();
        }
    }
})

app.directive('orange',foodCtrl) {
            foodCtrl.addOrange();
        }
    }
})

app.directive('banana',foodCtrl) {
            foodCtrl.addBanana();
        }
    }
})

(3)使用angular.element操作Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <!--<div enter leave>I'm here</div>-->  <hello></hello>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

app.directive('enter',function () {
    return function (scope,attrs) {
        console.log(element);
        element.bind('mouseenter',function () {
            element.addClass("alert-Box");
        })
    }
})

app.directive('leave',attrs) {
        console.log(element);
        element.bind('mouseleave',function () {
            element.removeClass("alert-Box");
        })
    }
})

app.directive('hello',template:'<div><input ng-model="txt"></div><div>{{txt}}</div>',element) {
            scope.$watch('txt',function (newVal) {
                if(newVal === 'error'){
                    element.addClass('alert-Box alert');
                }
            })
        }
    }
})

原文链接：https://www.f2er.com/angularjs/148895.html

AngularJS Directive的使用

猜你在找的Angularjs相关文章