AngularJS之指令

半兽人 发表于: 2018-10-01   最后更新时间: 2023-04-18 19:52:24  
{{totalSubscript}} 订阅, 3,288 游览

指令directive概述

指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性。不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。

区别

AngularJS与JQuery最大的区别在哪里?表现在数据双向绑定,实质就是DOM的操作形式不一样。

  • JQuery通过选择器找到DOM元素,再赋予元素的行为;
  • 而AngularJS则是,将指令与DOM绑定在一起,再扩展指令的行为。

所以AngularJS开发最理想的结果就是,在页面HTML与CSS的设计时,设计工程师只需要关注指令的使用;而在背后的逻辑开发上,架构工程师则是不需要知道如何操作DOM,只需要关注指令背后的行为要如何实现就行;测试工程师也可以开发针对指令的单元测试。

指令就是DOM与逻辑行为的媒介,本质就是DOM绑定的独立逻辑行为函数。

AngularJS内置的命令

screenshot

指令难点在于参数

先来看看都有哪些:

angular.module('app', [])
.directive('myDirective', function() {
    return {
    restrict: String,                
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:
    function(tElement, tAttrs) {...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or
    function(scope, element, attrs, transclude, otherInjectables) { ... },
    controllerAs: String,
    require: String,
    link: function(scope, iElement, iAttrs) { ... },
    compile: // 返回一个对象或连接函数,如下所示:
    function(tElement, tAttrs, transclude) {
        return {
            pre: function(scope, iElement, iAttrs, controller) { ... },
            post: function(scope, iElement, iAttrs, controller) { ... }
           }
        return function postLink(...) { ... }
        }
    };
 });

简单的例子

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
    </head>
    <body ng-app="MyModule">
        <hello></hello>
        <div hello></div>
        <div class="hello"></div>
        <!-- directive:hello -->
    </body>
    <script>
        var myModule = angular.module("MyModule", []);
        myModule.directive("hello", function() {
        return {
            restrict: 'AEMC',
            template: '<div>Hi everyone!</div>',
            replace: true
        }
    });
    </script>
</html>

页面结果:

Hi everyone!
Hi everyone!
Hi everyone!
Hi everyone!

可以看到,输出了4遍相同的内容,但是在html的写法有4种

  • restrict:String
    • E(元素)<my-directive></my-directive>
    • A(属性,默认值)<div my-directive="expression"></div>
    • C(类名<div class="my-directive:expression;"></div>
    • M(注释)<--directive:my-directive expression-->
  • priority: Number,指令执行优先级
  • template: String,指令链接DOM模板,例如<h1>{{head}}</h1>
  • templateUrl:String,DOM模板路径
  • replace: Boolean,指令链接模板是否替换原有元素。

AngularJS默认是使用A这种方式,也就是<div my-directive="expression"></div>这种。

推荐使用哪种方式呢?

推荐使用AEC的class这种会带来混淆,一般做来做样式的,M这种方式属于注解。

更新于 2023-04-18

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章