[武汉|结业弟子]JS-庄引|2017年05月12日的日报-技能树.IT修真院

发表于： 2017-05-12 22:51:17

1 840

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

了解AngularJS指令

明天计划的事情：（一定要写非常细致的内容）

了解自定义指令如何在项目发挥作用

了解列表的翻页问题，和搜索过滤

遇到的问题：（遇到什么困难，怎么解决的）

如何去自定义一个指令：自定义指令是angular中比较有难度的一个知识点，自定义指令能让代码更加简化，复用性更好。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<test-directive></test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
    return {
        template : "<h1>这是一个自定义指令</h1>"
    };
});
</script>
</body>
</html>

收获：（通过今天的学习，学到了什么知识）

AngularJS允许使用“指令”的新属性扩展HTML。

AngularJS具有一组内置指令，可为您的应用程序提供功能。

angularjs中内置了很多指令（Directive），常用的如ng-repeat、ng-class等等，我们也可以自己定义指令，而且在项目中是非常普遍的。

我们经常进行很多DOM操作，如点击事件，表单验证事件等等，angular不建议我们将这些操作放在控制层，也即Contrller处，而是应该在指令处进行DOM的操作。也算是为了减轻控制层的负担吧。

AngularJS自定义指令。

定义指令

angular.module("myApp", []).directive(name, fn)
name (string) 指令的名称
fn (function) 该函数返回指令的全部行为
当然，我们也可以往函数中注入各种服务，关于服务的定义可参考此文
请看示例：

angular.module("myApp", []).
directive(name, function($http, $timeout, YOUR_SERVICE){
 // 指令的行为
})

定义指令的行为

指令的行为可以是非常简单，也可以非常复杂，官方给了我们很多配置项，实际使用时只能具体问题具体分析了。

指令的行为最终会返回一个object对象，对象以键值对的方式定义，如下所示：

angular.module('myApp', [])
.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(...) { ... }
     }
  };
});

看起来复杂，实际使用指令的时候只会使用到一部分。

restrict （字符串）

该属性定义了属性在视图上的使用方式，默认值是A。备选值有：

A：即Attribute，以属性的方式定义

E：即Element，以元素的方式定义

C：即Class，以类的方式定义

M：即Comment，以注释的方式定义

参见实例：

angular.module("myApp", [])
.directive("myDirecitve", function(){
 return {
   restrict: 'AECM'
 }
})

// 视图上使用属性的方式
<div my-direcitve></div>

// 视图上使用元素的方式
<my-direcitve></my-direcitve>

// 视图上使用类的方式
<div class="my-direcitve"></div>

// 视图上使用注释的方式
<!--directive:my-direcitve -->