关于Angularjs中自定义指令一些有价值的细节和技巧

Markxu 发布于2019-08-22 16:35 / 279人阅读

摘要：属性为时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。

作者：心叶
时间：2018-04-22 10:58

一：自定义指令常用模板

下面是大致的说明，不是全面的，后面来具体说明一些没有提及的细节和重要的相关知识：

angular.module("yelloxingApp", []).directive("uiDirective", function() {

    return {
    
        restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合
        
        priority:Number,//设置指令执行优先级，在某个DOM上优先级高的会先执行
        
        terminal:Boolean,
        
        template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样
        
        templateUrl:String or Template Function,//除了字符串，这二个属性还可以设置函数
        
        replace:Boolean,//指令模板是否替换原来的元素
        
        scope:Boolean or Object,
        
        controller:String or function(scope, element, attrs) { ... },
        
        require:String or Array,
        
        //你需要知道link在每个实例都执行一遍，compile全程只会执行一遍
        link: function(scope, element, attrs,ctrl) { ... },
        
        compile:function(element, attrs) {
            //常用的就是compile的此处写执行一次的代码，或者在link方法里面写和dom有关的操作
        }
    };
});

二：一些属性说明

【scope】

可以设置boolean或者对象，先来说说boolean，这个比较简单：

1.当设置true的时候，表示继承父scope，是一个子scope；

2.当设置false的时候，直接使用父scope。

还有一种对象设置方法，就是设置一种隔离的scope，在使用隔离scope的时候，提供了三种方法同隔离之外的地方交互，下面用一个例子来一一说明：

angular.module("yelloxingApp", []).directive("scopeExample", ["$rootScope", function($rootScope) {

    return {
    
        restrict: "A",
        
        scope: {
            _userDataName: "=userDataName",
            _onSend: "&onSend",
            _fromName: "@fromName"
        },
        
        template: `
            
            
            
            
                fromName={{newfromname}}
                这是从父级获取到的{{_userDataName}}
            `,
            
        link: function($scope, element, attrs) {

            //使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值
            $scope.newfromname = $scope._fromName;
            $scope._useParentMethod = function() {
            
                //使用&符号可以在其中调用父类的方法
                $scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
                console.log($scope._userDataName);
                
            };
        }
    };
}]);

上面是指令的写法，下面来看看控制器里面有什么：

$scope.name = "心叶";

$scope.user = "yelloxing";

$scope.sendMail = function(email){
    console.error(email);
}

最后别忘了html里面的使用：

【require】

请求另外的controller，然后作为link方法的第四个参数传递进去，我们需要注意的是查找控制器的方法。

查找控制器的方法可以这样理解：使用？表示如果在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数，如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器，他们也可以组合，比如require: "?^ngModel"，如果没有前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误。

【terminal】

属性terminal:为true时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。

三：视图和model之间的数据格式化

类似过滤器的功能，有时候我们希望页面显示的是数据经过某种翻译后的样子，以便于约定，不过对于数据库也许简单的序号会更有益，因此你可能会需要在link中使用下面的方法来实现这个功能：

1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；

2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。

上面的$formatters和$parsers就是二个队列，视图到model和model到视图，会方便经过里面定义的方法的过滤，有点类似管道流，最后流到目的地。

别忘了设置类似require: "?ngModel"这样的语句去查找控制器。

四：视图和model数据同步问题

有时候在指令里面通过jquery修改了input的数据，不过angularjs并不会知道，这时候，你可以选择下面中的一个方法：

1.触发输入框change改变，让Angularjs发现数据改变了，从而去调用$setViewValue(value),同步数据：$("input").trigger("change");

2.直接手动触发同步value到viewValue和modelValue中的行为：ctrl.$setViewValue($scope.info)。

五：几个零碎的技巧

1.根据输入框是否合法来设置true或false：ctrl.$setValidity(errorType, boolean);//errorType表示错误类别，可以自定义

2.设置监听指定的一个model值，当然还有监听集合等方法：$scope.$watch(attrs["ngModel"], function(newValue, oldValue) {});

3.有时候在指令里面新添加的字符串需要被angularjs管理，就可以用下面的方法编译一下：$compile(newHtml)($scope)。

六：常用方法或服务

解析一段字符串（可能是属性也可能是方法）的方法有二个，直接看下面例子：

$scope.getInfo=function(){
    console.log("这是执行了函数的表现");
};

var funName="getInfo()";

//执行方法一：
$scope.$eval(funName);
//执行方法二：
$parse(funName)($scope);

云服务器 GPU云服务器关于中文域名的销售技巧软件定义存储的核心价值大云软件定义存储支持的指令架构有价值的区块链

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

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

这5篇文章将使你成为一个Angular Change Detection专家。

摘要：编写工作首先介绍了一个称为的内部组件表示，并解释了变更检测过程在视图上运行。本文主要由两部分组成第一部分探讨错误产生的原因，第二部分提出可能的修正。它对我意义重大，它能帮助其他人看到这篇文章。在过去的8个月里，我大部分空闲时间都是reverse-engineering Angular。我最感兴趣的话题是变化检测。我认为它是框架中最重要的部分，因为它负责像DOM更新、输入绑定和查询列表...

Coly 2019-08-21 17:57 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（四）--- 深入视图，模板系统，模块和依赖注

摘要：模块和依赖注入细心的读者可能已经发现了，到目前为止所用到的例子都是使用的全局的构造函数来定义控制器的。这非常的简单，只需使用如下参数来调用即可控制器的名字字符串类型控制器的构造函数全局定义的控制器构造函数只适用于快速示例和原型开发。上一篇：【译】《精通使用AngularJS开发Web App》（三）下一篇：书名：Mastering Web Application Develop...

zr_hebo 2019-08-19 14:29 评论0 收藏0
angularJS directive用法详解

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

hlcc 2019-08-20 11:09 评论0 收藏0
JSDuck 与 AngularJS 融合技巧

摘要：融合思路解决这个问题，有两种思路。给我们带来了以下新成员模块服务指令筛选器和控制器。与其他类是通过类的名称区分的，名称统一以结尾。这种处理方式是一种折中方案，如果想要更加规范优雅的话，建议使用自定义标签来解决。字数：1568 阅读时间：10分钟前言前面，我们以一个实战案例来详细说明了如何在实际开发中使用JSDuck工具。但是，并不是所有的时候，代码的封装方式都受我们控制的。...

CarterLi 2019-08-21 18:41 评论0 收藏0
Angularjs 开发指南自定义指令（custom directives）

摘要：使用开发，很重要的一步是需要开发自定义的指令。接下来分几个步骤记录如何开发一个自定义的指令。对这个元素及其子元素进行变形之类的操作是安全的。链接函数链接函数负责注册事件和更新。说明和是指令的关键部分，留在下一章中详细讨论。使用Angularjs开发，很重要的一步是需要开发自定义的指令（custom directives）。接下来分几个步骤记录如何开发一个自定义的指令。目录：指令...

calx 2019-08-19 18:15 评论0 收藏0