Angular directive 实例详解

BLUE 发布于2019-08-19 18:40 / 3447人阅读

摘要：方法三使用调用父作用域中的函数实例地址同样采用了缺省写法，运行之后，弹出窗口布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。

准备代码，会在实例中用到

</>复制代码 
var app = angular.module("app", []);

angular指令定义大致如下

</>复制代码 
app.directive("directiveName", function() {
  return {
    // config
  }
})

其中return返回的配置对象包含很多参数，如下一一说明。

1. restrict

值为字符串，可选参数，指明指令在DOM中以什么形式被声明

</>复制代码

默认值为restrict: "EA"，表示可以在DOM里面可以用元素形式和属性形式被声明。一般来说，如果你想创建一个自己模板的组件时，则使用元素形式，但是仅仅是为已有元素添加功能的话，就使用属性名。

</>复制代码 
如果想要支持IE8，则最好使用属性和类形式来定义，另外从angular 1.3.X开始，已经放弃支持IE8了。

2. priority

数字，可选参数，致命指令的优先级，若在单个DOM元素上有多个指令，则优先级高的先执行。

当然，设置指令的优先级不太常用，但是比较特殊的例子是，内置指令ng-repeat的优先级为1000，而ng-init的优先级为 450。

3. terminal

布尔型，可选参数，可以被设置为true或者false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用优先级相同任然会执行。

4. template

字符串或者函数，可选参数。

可以是一段html文本

</>复制代码 
app.directive("hello", function() {
  return {
    template: "Hello, world!
"
  }
})

使用如下

</>复制代码

渲染结果为

</>复制代码 
  
    Hello, world!

也可以是一个函数，可接受两个参数Element与Attrs

其中Element是指使用此指令的元素，而Attrs则是实例的属性，它是由一个元素上所有属性组成的集合，形如

</>复制代码 
{
  title: "test",
  id: "testDiv",
  class: "demo",
  input: "text",
  ...
}

下面让我们看看template是一个函数时的情况

</>复制代码 
app.directive("hello", function() {
  return {
    template: function(element, attrs) {
      return ""+ attrs.title +"
"
    }
  };
});

html代码

</>复制代码

渲染结果

</>复制代码 
  message

实例地址

5. replace

布尔型，默认值为false，设置为true的时候，表示可以用模板内容替换自定义的元素标签。

在template的例子中，我们发现渲染结果中包含有自定义的元素，很显然，这并不是我们想要的渲染结果，因此将replace设置为true之后，hello标签将会消失

</>复制代码 
app.directive("hello", function() {
  return {
    replace: true,
    template: function(element, attrs) {
      return ""+ attrs.title +"
"
    }
  };
});

渲染结果如下，hello标签消失不见

</>复制代码 
message

6. templateUrl

字符串或者函数，可选参数

可以使一个代表html文件路径的字符串，也可以是一个函数，大致意思与template一样。

在本地开发时，需要运行一个服务器，不然使用templateUrl会报错

</>复制代码 
Cross origin request script(cors)

由于加载html模板是通过异步加载，若加载大量的模板会拖慢网站的速度，这里有一个技巧，就是先缓存模板，你可以先在你的index页面加载好，将下列代码作为你页面的一部分包含在内

</>复制代码

这里的id属性就是被设置在templateUrl上用的

另外一种方法缓存如下

</>复制代码 
app.run(function($templateCache) {
  $templateCache.put("template.html", "template
");
})

7. scope

布尔值或者对象，可选参数，默认值为false，表示继承父级作用域。

如果值为true，表示继承父作用域，并创建自己的作用域（子作用域）

如果为对象，{}，则表示创建一个全新的隔离作用域。

首先我们需要来了解一下scope的继承机制。我们使用ng-controller这个指令来举例。我们都知道ng-controller可以从父作用域中继承并创建一个新的子作用域。如下：

</>复制代码 
    parentNode: {{aaa}}
    
    
        childrenNode: {{aaa}}

</>复制代码 
angular.module("app", [])
.controller("demoController", function($scope) {
    $scope.aaa = "children";
})

实例地址

这时页面的显示结果为

</>复制代码 
parentNode: parent
childrenNode: children

当时当我们并没有在demoController的作用域中给aaa赋值，也就是在上例中删除这一句$scope.aaa = "children";，那么执行结果就为

</>复制代码 
parentNode: parent
childrenNode: parent

注意：如果一个元素上有多个指令都使用了隔离作用域，那么只有其中一个可以生效，只有指令模板中的根元素才能获得一个新的作用域，这时候，scope就被设置为true了。

</>复制代码 
    parentNode: {{aaa}}
    
    
        childrenNode: {{aaa}}
        
        
            lastNode: {{aaa}}

</>复制代码 
angular.module("app", [])
.controller("demoController01", function($scope) {
    $scope.aaa = "children";
})
.controller("demoController02", function($scope) {
    $scope.aaa = "last"
})

实例地址

接下来，我们通过一个简单明了的例子来说明scope取值的不同差别

</>复制代码 
    parent: {{ name }}

</>复制代码 
angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.name = "Jake";
})
.directive("myDirective", function() {
    return {
        restrict: "EA",
        scope: false,
        replace: true,
        template: "" +
            "" +
                "childNode: {{ name }} " +
                "
" +
                "" +
            ""
    }
})

实例地址

点击上面的实例地址，我们可以依次改变scope的值为false, true, {}，结果发现

false：儿子继承父亲的值，改变父亲的值，儿子的值也随着改变，反之亦然，这就是继承且不隔离

true：儿子继承父亲的值，改变父亲的值，儿子的值也随着改变，但是改变儿子的值，父亲的值并没有改变，这就是继承但是隔离

{}：没有继承父亲的值，所以儿子的值为空，改变任何一方的值都不会影响另一方，这就是不继承且隔离

</>复制代码 
当想要创建一个可重用的组件时，隔离作用域是一个很好的选择，通过隔离作用域，我们可以确保指令是独立的，并且可以轻松的插入到任何HTML APP中，并且这种做法防止了父作用域被污染。

隔离作用域可以通过绑定策略来访问父作用域的属性

我们来看一个例子

</>复制代码

</>复制代码 
angular.module("app", [])
.controller("mainController", function($scope) {
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: false,
        replace: true,
        template: "Hello world!
"
    }
})

运行上面的代码，我们在input中输入颜色值，比如red，那么hello world一行的背景就会变成红色。动手试试！

实例地址

但是，当我们将scope的值设置为{}时，再次运行代码就发现页面并不能成功的完整显示了.这是因为{}让helloWorld指令产生了隔离作用域，没办法从父级作用域中继承到color的值了。

所以在template中的{{color}}变成了依赖于自己的作用域，而不是依赖于父级作用域。因此我们需要一些办法来让隔离作用域能够读取父级作用域的属性，这个方法就是绑定策略。

下面我们来探索设置这种绑定策略的几种方法

方法一使用@来进行单向文本（字符串）绑定

</>复制代码

</>复制代码 
angular.module("app", [])
.controller("mainController", function($scope) {
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {
            color: "@colorAttr"
        },
        replace: true,
        template: "Hello world!
"
    }
})

实例地址

这种办法只能单向，通过在运行的指令DOM上设置color-attr属性，并且采用{{}}绑定某个模型值。当然，我们也可以直接在这里绑定字符串的颜色值，如color-attr="red"

因此当表达式的值发生变化时，属性color-attr的值也会发生变化，通过单向绑定该值，就可以改变隔离作用域中的属性color.

</>复制代码 
如果绑定的隔离作用域属性名与元素的属性名相同，则可以采用缺省写法
</>复制代码 
// html
// js
app.directive("helloWorld", function() {
   return {
       scope: { color: "@" },
       ...
   }
})

方法二、使用"="进行双向绑定

</>复制代码 
    
    
    {{ color }}

</>复制代码 
angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.color = "red";
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {
            color: "="
        },
        replace: true,
        template: "" +
            "Hello world!" +
        "
" + 
        ""
    }
})

实例地址

此处也采用了类似的缺省写法。

这里需要注意的是，我们要直接在指令元素设置属性时，是直接将实际的作用域模型复制给该属性

这样一个双向绑定被建立了，改变任何一个input值都会改变另外一个值。

方法三、使用"&"调用父作用域中的函数

</>复制代码 
    
    
    {{ name }}

</>复制代码 
angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.name = "yangbo";
    $scope.say = function() {
        alert("hello!");
    }
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {
            name: "@",
            say: "&"
        },
        replace: true,
        template: ""
    }
})

实例地址

同样采用了缺省写法，运行之后，弹出窗口！

8. transclude

布尔值或者字符element，默认值为false

这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当我们开启transclude之后，我们就可以使用ng-transclude来指明应该在什么地方放置transclude的内容

</>复制代码 
    
        china
        
            {{name}}

</>复制代码 
angular.module("app", [])
.controller("mainController", function($scope) {
    $scope.name = "yangbo5207";
})
.directive("helloWorld", function() {
    return {
        restrict: "EA",
        scope: {},
        replace: true,
        transclude: true,
        template: "你看不见我
"
    }
})

运行上面的代码，输出

</>复制代码 
china
yangbo5207

我们查看渲染出来的html，结果为

</>复制代码 
    
        china
        
            
                yangbo5207

另外当开启transclude时，会创建一个新的transclude空间，并且继承父作用域（也就是scope设置的隔离作用域）

从上面例子我们知道，当transclude的值被设置为true时，嵌入的内容为{{name}}，但是如果将它的值设置为element呢，我们可以在上例的基础上进行一个简单的修改，发现，嵌入内容为整个元素

</>复制代码 
{{name}}

查看渲染结果

</>复制代码 
    
        china
        
          
            
              yangbo5207

注意：在一个指令的模板中，只能声明一次ng-transclude

那么问题来了，如果我们想要把嵌入内容多次放入我们的模板中怎么办？

可以使用$transclude，后面会讲到！也可以使用complie函数中，里面的transcludeFn参数，后面会讲到！或者使用link连接函数

9. controller

可以是一个字符串或者函数。

若为字符串，则将字符串当做控制器的名字，来查找注册在应用中的控制器的构造函数

</>复制代码 
angular.module("app", [])
.directive("myDirective", function() {
    return {
        restrict: "EA",
        replace: true,
        transclude: true,
        
        // 会查找模块中其他被名为targetController的控制器
        controller: "targetController"
    }
})
.controller("targetController", function($scope, $element, $attrs, $transclude) {
    // 控制器逻辑放在这里
})

当然，也可以直接在指令内部定义为匿名函数，同样可以注入任何服务

</>复制代码 
angular.module("app", [])
.directive("myDirective", function() {
    return {
        restrict: "EA",
        replace: true,
        transclude: true,
        controller: function($scope, $element, $attrs, $transclude) {
            // 控制器逻辑
        }
    }
})

另外还有一些特殊的服务可以注入，

$scope 与指令元素相关联的作用域

$element 当前指令对应的元素

$attrs 当前元素的属性组成的对象

$transclude 嵌入链接函数，实际被执行用来克隆元素和操作DOM中的函数（除非是用来定义一些可复用的行为，否则一般不推荐在这使用）

指令的控制器和link函数（后面会讲到）可以进行互换。区别在于，控制器主要用来提供可在指令间复用的行为，可对外提供与外部交互的接口，但是link链接只能在当前指令内部中定义行为，且无法在指令间复用。

</>复制代码 
    外面的世界很精彩。

</>复制代码 
angular.module("app", [])
.directive("testDirective", function() {
    return {
        transclude: true,
        replace: true,
        controller: function($scope, $element, $attrs, $transclude, $log) {
            $transclude(function(clone) {
                var a = angular.element("");
                a.attr("href", $attrs.url);
                a.text(clone.text());
                $element.append(a);
            });
        }
    }
})

实例地址

$transclude 可以接受两个参数，第一个是$scope，第二个是才有参数clone的回调函数。

而这个clone实际上就是嵌入的内容。可以在根据它做很多DOM操作。

它还有最简单的用法

</>复制代码 
angular.module("app", [])
.directive("testDirective", function() {
    return {
        transclude: true,
        replace: true,
        controller: function($scope, $element, $attrs, $transclude, $log) {
            
            // 这里的$transclude就是嵌入的内容
            var a = $transclude();
            $element.append(a);
        }
    }
})

但是我们要注意，使用$transclude会生成一个新的作用域。默认情况下，如果我们简单使用$transclude()，那么其作用域就是$transclude 生成的作用域。但是如果我们使用$transclude($scope, function(clone) {})，那么作用域就是directive的作用域了。

当然问题又来了，如果我们想使用父级作用域呢？

</>复制代码 
$scope.$parent

</>复制代码 
    
        炒美股，上老虎2

</>复制代码 
angular.module("app", [])
.controller("parentController", function($scope) {
    $scope.title = "PARENT TIGER";
})
.controller("sonController", function($scope) {
    $scope.title = "CHILDREN TIGER";
})
.directive("testDirective", function() {
    return {
        transclude: true,
        replace: true,
        controller: function($scope, $element, $attrs, $transclude, $log) {
            var a = $transclude();
            $element.append(a);
            $log.info($scope.title);
            $log.info($scope.$parent.title);
        }
    }
})

实例地址

10. controllerAs

angualr 1.2之后，就已经开始支持controllerAs的语法，这样我们就可以不用将属性和方法挂载到$scope上，而是this上。

</>复制代码 
{{ demo.name }}

</>复制代码 
angular.module("app", [])
.controller("demoController", function() {
    this.name = "Jake";
})

实例地址

我们可以从实例中看出，这里的this就是指的as后面的那个别名。然后我们在表达式中就可以使用这个别名

我们知道，在directive中的controller，主要职能是对外提供交互接口，而结合require与link，因此我们常常会利用这样的语法而非上面例子中的$scope

</>复制代码 
app.directive("testDirective", function() {
    return {
        controller: function() {
            this.name = "Jake";
        }
    }
})

11. require

字符串或者数组，字符串代表另一个指令的名字，它将作为link函数的第四个参数。具体用法我们可以举例子来说明。

假设现在我们要编写两个指令，两个指令的link函数中存在许多重合的方法，这时候我们就可以将这些重复的方法写在第三个指令的controller中，然后在这两个指令中，使用require将第三个指令引入进来，然后我们就可以通过link连接函数的第四个参数引用这些重合的方法了

指令之间常常通过这种方式进行交互

</>复制代码 
    
        
            {{expander.text}}

</>复制代码 
var expModule=angular.module("expanderModule",[])
expModule.directive("accordion", function() {
    return {
        restrict : "EA",
        replace : true,
        transclude : true,
        template : "
",
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});
expModule.directive("expander", function() {
    return {
        restrict : "EA",
        replace : true,
        transclude : true,
        require : "^?accordion",
        scope : {
            title : "=expanderTitle"
        },
        template : ""
                   + "{{title}}
"
                   + "
"
                   + "",
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});
expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : "Click me to expand",
        text : "Hi there folks, I am the content that was hidden but is now shown."
    }, {
        title : "Click this",
        text : "I am even better text than you have seen previously"
    }, {
        title : "Test",
        text : "test"
    }];
});

实例地址

实例说明，controller是用来与不同指令之间通信的。

另外我们可以在require的参数值加上下面的某个前缀，这回改变查找控制器的行为。

没有前缀指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error

? 若在当前指令中没有找到所需的控制器，则会将null传给link链接函数的第四个参数

^ 如果在当前的指令中没有找到所需的控制器，则会查找父元素的控制器

?^ 如果在当前和父元素中都没有找到控制器，则会将null传给link

12. angular指令编译过程

首先加载angular库，查找ng-app指令，从而找到应用的边界，根据ng-app划定的作用域来调用$compile服务进行编译。

angular会遍历整个html文档，并根据js中指令的定义来处理在页面上声明的各个指令，按照指令的优先级排列，根据指令中的配置参数(template, replace, transclude等)转换DOM，然后就开始按照顺序执行各指令的compile函数（如果指令上有定义compile函数）对模板自身进行转换。

</>复制代码 
此处的compile函数值什么指令中配置的，与上面说的$compile服务不一样

每个compile函数执行完后会返回一个link函数，所有的link函数会合成一个大的link函数，然后这个大的link函数就会被执行，主要做数据绑定，通过 DOM上注册监听器来动态修改scope中的数据，或者是使用$watchs监听scope中变量来修改DOM，从而建立双向绑定等等。

若我们的指令中没有配置compile函数，那我们配置的link函数就会运行，她做的事情大致跟上面compile返回之后所有的link合成的大link函数差不多。

所以，在指令中compile与link选项是互斥的，如果同时设置了这两项，那么就会把compile所返回的函数当做是链接函数，而link选项本身会被忽略。

13. compile编译函数与link链接函数

cmopile选项可以返回一个对象或者函数，在这里我们可以在指令和实时数据被放到DOM之前进行DOM操作，比如我们可以在这里进行添加或者删除节点的DOM操作。

所以编译函数是负责对模板的DOM进行转换，并且仅仅只会运行一次

</>复制代码 
//compile函数的语法
compile:function compile(tElement,tAttrs,transclude){
      return{
        pre:function preLink(scope,iElement,iAttrs,controller){},
        post:function postLink(scope,iElement,iAttrs,controller){}
      }
    }

对于我们编写的大部分指令来说，并不需要对模板进行转换，所以大部分情况只需要编写link函数就行。

</>复制代码 
preLink函数会在编译阶段之后，指令链接到子元素之前执行，类似的，postLink会在指令链接到子元素之后执行。这意味着，为了不破坏绑定过程，如果你需要修改DOM结构，你应该在postLink函数中来做这件事情。

link函数负责将作用域与DOM进行链接

</>复制代码 
//link链接函数
link:function postLink(scope,iElement,iAttrs){}

若指令中定义有require选项，则link函数会有第四个参数，代表控制器或者所依赖的指令的控制器（上面require选项例子已有例子）

内容都真够多的，终于整理完了，今天写了两篇文章，感觉好累！如果大家觉得文章对你有帮助，求赞求收藏。

</>复制代码 
许多内容都是从不同的网站上整理而来，每一个实例都是自己运行过后保存在codepen上，大家可以结合codepen的例子结合理解文章内容，本文属于收集文，非原创，但绝对干货！值！得!一!赞！与收藏。

GPU云服务器云服务器 GZip实例详解内部类实例详解 database详解及实例 directly

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79838.html

Angular directive 实例详解

摘要：方法三使用调用父作用域中的函数实例地址同样采用了缺省写法，运行之后，弹出窗口布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。准备代码，会在实例中用到 var app = angular.module(app, []); angular指令定义大致如下 app.directive(directiveName, functi...

Jiavan 2019-08-29 10:54 评论0 收藏0
Angular directive 实例详解

摘要：方法三使用调用父作用域中的函数实例地址同样采用了缺省写法，运行之后，弹出窗口布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。准备代码，会在实例中用到 var app = angular.module(app, []); angular指令定义大致如下 app.directive(directiveName, functi...

mengera88 2019-08-01 15:23 评论0 收藏0
angular 指令详解（一）compile与link

摘要：实例元素及实例属性都会作为参数传递到函式函式關連於此實例的實例元素實例元素的屬性结论到目前为止，但愿你有清楚的理解关于及之间的差异。原文地址：https://987.tw/2014/09/03/ang... AngularJS directives是令人惊艳的。它允许你创造高度语意且可重复利用的元件。在某种意义上你可以认为它是极致的web components先驱者。有许多很棒的文...

crossea 2019-08-20 14:14 评论0 收藏0
angularJS directive用法详解

摘要：可选参数，布尔值或者对象默认值为，可能取值默认值。布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。前言最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。欢迎批评指出错误的地方。 Angularjs指令定义的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 评论0 收藏0

发表评论

登陆后可评论

0条评论

BLUE

男|高级讲师

我要关注我要私信

TA的文章

tensorflow2.4.0

阅读 2570·2023-04-26 00:46
tensorflow函数

阅读 691·2023-04-25 21:36
如何使用OPA实现多云策略和流程可移植性

阅读 810·2021-11-24 10:19
#私藏项目实操分享# 什么是 SAP enhancement package

阅读 2412·2021-11-23 09:51
hostxen，双11，注册赠送20元代金券，充值多送25%，VPS可选中国香港/洛杉矶/日本/新加

阅读 1124·2021-10-21 09:39
教你如何在低成本、有限的时间里策划裂变100社群_怎么做微信防封群

阅读 927·2021-09-22 10:02
赋值运算符重载函数不加&为什么会出错？

阅读 1767·2021-09-03 10:29
前端每日实战：54# 视频演示如何用纯 CSS 创作一副国际象棋

阅读 2863·2019-08-30 15:53

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

Angular directive 实例详解

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

Hello, world!

</>复制代码

</>复制代码

Hello, world!

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

方法一 使用@来进行单向文本（字符串）绑定

</>复制代码

</>复制代码

</>复制代码

</>复制代码

方法二、使用"="进行双向绑定

</>复制代码

</>复制代码

方法三、使用"&"调用父作用域中的函数

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动

方法一使用@来进行单向文本（字符串）绑定

`</>复制代码`