AngularJS核心特性——指令

最新推荐文章于 2020-02-02 15:54:41 发布

chengqiuming

最新推荐文章于 2020-02-02 15:54:41 发布

阅读量247

点赞数

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.csdn.net/chengqiuming/article/details/82313957

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一点睛

AngularJS内置了大量的指令（directive），如ng-repeat、ng-show、ng-model等。即使用一个简短的指令可实现一个前端组件。

例如：有一个日期的js/jQuery插件，使用AngularJS封装后，在页面上调用此插件可以通过指令来完成。

元素指令：<data-picker></data-picker>

属性指令：<input type="text" data-picker/>

样式指令：<input type="text" class="data-picker">

注释指令：

二实战

1 演示页面

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

2 自定义指令

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

3 效果