angular自定义指令详解

PingCAP 发布于2019-08-20 17:20 / 1740人阅读

摘要：在运用的时候，运用自定义指令可以写一些组件，非常方便。这里给大家分享一些关于自定义指令的知识。

在运用angularjs的时候，运用自定义指令可以写一些组件，非常方便。这里给大家分享一些关于angular自定义指令的知识。

1. 定义

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。

2.定义指令的方法：

angular.module("myApp", []) 
.directive("myDirective", function ($timeout, UserDefinedService) { 
    // 指令定义放在这里 
});

第一个参数，指令的名字myDirective 用来在视图中引用特定的指令。
第二个参数是一个函数，这个函数返回一个对象，$compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

3.指令设置的选项

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 指令在DOM中可以何种形式被引用或声明

可选值如下： （ 可组合使用 ）

E（元素）
A（属性，默认值）

C（类名）

M（注释） <--directive:my-directive expression-->

priority 优先级用来表示指令使用的优先顺序
如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。

terminal 用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。



   
    这是自定义指令
       

var myCtr=["$scope",function($scope){}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
return {
    restrict: "ECMA", 
    priority: 2, 
    terminal: true, 
    template:function(tElement, tAttrs){
        tElement[0].style.fontSize="18px"; //设置字体
    }
}
});
app.directive("directiveSec",function(){
return {
    restrict: "ECMA", 
    priority: 1, 
    template:function(tElement, tAttrs){
        tElement[0].style.color="red"; //设置颜色
    }
}
});

template
用来表示模板，可以是一段字符串，如“

这是自定义指令

”,也可以是一个函数，可以参考上面的例子

template:function(tElement, tAttrs){
//tElement表示当前元素，是一个数组，tAttrs表示该元素的属性，是一个对象
   tElement[0].style.color="red"; //设置颜色
}

templateUrl 用来表示模板，与上面的template功能相似，但表示路径，可以是外部HTML文件路径的字符串也可以是一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。

replace 默认为false，模板会被当作子元素插入到调用此指令的元素内部，为true，则直接替换此元素

 
.directive("someDirective", function() { 
return { 
    template: "some stuff here" 
}; }); 

 
some stuff here 
 



.directive("someDirective", function() { 
return { 
    replace: true // 修饰过 
    template: "some stuff here" 
}; }); 

some stuff here

scope

（1）当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。
（2） 默认为false，并不会创建新的作用域对象，直接使用父scope。
（3）设置为{}，表示隔离作用域，指令的 模板就无法访问外部作用域了

var myCtr=["$scope",function($scope){
    $scope.name="father controller！！"
}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
    return {
        restrict:"ECMA",
        template: "这是自定义指令{{name}}",
        scope:{},
        controller:function($scope){
            console.log($scope.name);//打印出来为undefined，因为无法访问尾部作用域了
        }
    }
});

当然，AngularJS提供了几种方法能够将指令内部的隔离作用域，同指令外部的作用域进行数据绑定。
（a）@ (or @attr) 单向绑定，外部scope能够影响内部scope，但反过来不成立

（b）= (or =attr)  双向绑定，外部scope和内部scope的model能够相互改变

    ![图片描述][1]
    上面的输入框输入，下面会变，下面的输入框输入上面的也会变

    （c）& (or &attr)  把内部scope的函数的返回值和外部scope的任何属性绑定起来

controller
controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.当为函数时，可以像平时写控制器那样写，可以将任意可以被注入的AngularJS服务传递给控制器

controllerAs（字符串）
controllerAs参数用来设置控制器的别名，可以以此为名来发布控制器，并且作用域可以访问controllerAs。这样就可以在视图中引用控制器，甚至无需注入$scope。

require
require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。

字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。

混合云私有云自定义指令自定义指令实例自定义菜单详解指令详解

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

转载请注明本文地址：https://www.ucloud.cn/yun/83510.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...

BLUE 2019-08-19 18:40 评论0 收藏0
Angular directive 实例详解

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

Anleb 2019-08-05 17:50 评论0 收藏0
Angular directive 实例详解

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

mengera88 2019-08-01 15:23 评论0 收藏0
Angular开发实践（三）：剖析Angular Component

摘要：组件元数据组件元数据等，下文将着重讲解每个元数据的含义。建议此时获取数据，不要在构造函数中获取。每次变化监测发生时被调用。销毁指令组件之前触发。 Web Component 在介绍Angular Component之前，我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式，提出Web Component的标准。每个组件包含自己的html、css、j...

Tamic 2019-08-22 15:40 评论0 收藏0