GVKun编程网logo

angular自定义指令中的transclusion以及自定义指令的嵌套（angular自定义指令例子）

14

如果您想了解angular自定义指令中的transclusion以及自定义指令的嵌套的相关知识，那么本文是一篇不可错过的文章，我们将对angular自定义指令例子进行全面详尽的解释，并且为您提供关于a

如果您想了解angular自定义指令中的transclusion以及自定义指令的嵌套的相关知识，那么本文是一篇不可错过的文章，我们将对angular自定义指令例子进行全面详尽的解释，并且为您提供关于angular 自定义指令、Angular17之Angular自定义指令详解、angularjs – 在自定义指令中禁用ngClick事件处理、angularjs – 如何在自定义指令中设置ng-model-options？的有价值的信息。

本文目录一览：

angular自定义指令中的transclusion以及自定义指令的嵌套（angular自定义指令例子）

angular自定义指令中的transclusion以及自定义指令的嵌套（angular自定义指令例子）

初衷

写这篇文章的初衷有以下几点：

1.最近项目中需要用到ng的自定义指令，并且还涉及到自定义指令的嵌套。
2.百度和谷歌找到的答案都不尽人意。

所以想着自己写一篇得了。

事先声明

事先说明，鄙人刚入前端4月有余，属于新蛋一枚，也是初次写博客（第一次就这么献给sf了。），我尽自己最大的努力把我想表达的意思表达出来。好了，废话不多说，直接奔入主体。

前提

首先，还不知道ng自定义指令的童鞋请戳这篇文章。
http://www.cnblogs.com/lvdaba...
这篇文章分了上中下，三篇，讲ng自定义指令已经很详细了。

其次，还不知道ng自定义指令中的transclusion是啥玩意童鞋请戳这篇文章。
http://www.html-js.com/articl...
这篇文章采用口语化的表达方式诙谐的讲述了何为transclusion。

好了，到这里，我们正式再次进入主题。

transclusion的值

我们先创建一个app,代码如下

var app=angular.module('myApp',[]);
app.controller("testController",function($scope){
    
});

我们都知道transclusion是自定义指令的的配置项，它的值有以下几种情况：

1.boolean类型，也就是为true,或者false,当然，默认为false。
2.Object类型，可以是一个对象。
3.element类型，还可以是一个元素。（表示：我目前还没有玩过element。）

transclusion为boolean时

好了，先来说说其值为boolean类型的时候吧。
创建一个自定义指令，设置其transclusion为true。代码如下：

app.directive('popSelect',[function(){
  return {
    restrict: 'AE',scope:{
            
    },transclude:true,replace:true,template:
       '<div>'+
          '<div>'+
              '<input type="text" ng-model="input" ng-focus="hasDate=true"/>'+
           '</div>'+
           '<div ng-transclude></div>'+
           '<div>这是popselect指令的内容</div>'+
        '</div>',link:function(scope,elem,attrs){
          
        }  
    }
}]);

大家应该有看到在template里面多了一个东西是'<div ng-transclude></div>'，看到就可以了，在这里留个悬念。

既然是自定义指令的嵌套，那好歹也要有两个指令吧，废话不多说，再创建一个指令，此指令作为儿子被别人嵌套，而上面那个嵌套别人的指令我们叫做父亲。代码如下：

app.directive('childElem',[function(){
    return {
        restrict: 'AE',template:'<div>'+
                    '<div>这是child指令的内容</div>'+
                 '</div>',attrs){
          
        }  
    }
}])

父亲和儿子都创建完成了，那我们来看看html里面是怎么嵌套了。直接上代码：

<pop-select>
    <child-elem></child-elem>
</pop-select>

没错，html就是这么简单就可以了，看看页面是啥效果：

看到没，儿子的template内容被嵌入进父亲的template（姑且认为是template吧），那么它被嵌入到父亲的template的哪里了呢，我们看看控制台。

大家有没有发现什么，上图红框中的位置是不是恰好就是父亲的template的'<div ng-transclude></div>'这句话所在位置呀。

没错，只要你的指令中嵌套其他的指令，那么你在父亲的配置项中设置transclude:true，并且在template中你需要的地方加上'<div ng-transclude></div>'这句嵌套话，那么ng将自动把儿子的内容加入到'<div ng-transclude></div>'这个标签中来，请仔细看控制台红框的图片。

现在大家自动transclude:true怎么用了吧。

transclusion为object时

这里有人就要问了：你这是嵌套一个儿子啊，如果我家钱多，我土豪，我要生很多个儿子那怎么办？

那此时就要使用transclude的值为object了。废话不多说再次上代码。

app.directive('parentDirective',[function(){
  return {
     restrict: 'AE',transclude:{
         'child1':"childElem",'child2':"childElem2",'child3':"childElem3"
     },template:
       '<div>'+
          '<div>'+
             '<input type="text" ng-model="input" value="这是parant指令"/>'+
          '</div>'+   
          '<div ng-transclude="child2"></div>'+
          '<div ng-transclude="child3"></div>'+
          '<div ng-transclude="child1"></div>'+
       '</div>',attrs){
          
        }  
    }
}]);

大家注意到这一次父亲的transclude是一个对象

{
            'child1':"childElem",'child3':"childElem3"
         }

在父亲的template中还有这样三句话：

'<div ng-transclude="child2"></div>'+
      '<div ng-transclude="child3"></div>'+
      '<div ng-transclude="child1"></div>'+

大家可能注意到这三句话中的child1，child2，child3怎么和父亲的transclude值中的三个属性child1，child2，child3一毛一样啊。猜猜呗，我想有人应该知道是怎么玩了。

那父亲的transclude值中的childElem，childElem2，childElem3这三个是啥玩意？别急嘛。这不，父亲还没有儿子吗？来，给他三个儿子。

首先是大儿子：

app.directive('childElem',attrs){
          
        }  
    }
}])

然后是二儿子：

app.directive('childElem2',template:'<div>'+
                    '<div>这是childElem2指令的内容</div>'+
                 '</div>',attrs){
          
        }  
    }
}])

最后是三儿子：

app.directive('childElem3',template:'<div>'+
                    '<div>这是childElem3指令的内容</div>'+
                 '</div>',attrs){
          
        }  
    }
}])

儿子们到齐了，接下来就该html了。继续上代码：

<parent-directive>
    <child-elem></child-elem>
    <child-elem2></child-elem2>
    <child-elem3></child-elem3>
</parent-directive>

那么页面效果是啥样子呢？看下图：

看，三个的儿子的内容和父亲的内容都显示出来了。

让我们再看看控制台：

三个红框中的内容就是三个儿子的template了。

大家现在应该明白了吧，没错。当父亲的transclude是一个对象时，那么属性名就是你自己起的名字， 值就是你需要嵌入的儿子的名字。然后你再在父亲的template里面写上'<div ng-transclude="你起好的属性名字"></div>'，这样ng就能知道你是想把儿子嵌入到父亲的哪里了。

好了，还没有不明白的么。如果不明白请看第二遍。哈哈、

全部示例代码

最后，附上本例中的全部代码。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body ng-controller="testController">
    <h1>嵌套一个指令</h1>
       <pop-select>
          <child-elem></child-elem>
       </pop-select>

    <h1>&nbsp;</h1>

    <h1>嵌套多个指令</h1>
       <parent-directive>
           <child-elem></child-elem>
           <child-elem2></child-elem2>
           <child-elem3></child-elem3>
       </parent-directive>
</body>
<script src="https://staticfile.qnssl.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script>
   var app=angular.module('myApp',[]);
   app.controller("testController",function($scope){
    
   });
   app.directive('popSelect',[function(){
      return {
        restrict: 'AE',scope:{
            
        },template:'<div>'+
                    '<div><input type="text" ng-model="input" ng-focus="hasDate=true"/></div>'+
                    '<div ng-transclude></div>'+
                    '<div>这是popselect指令的内容</div>'+
                 '</div>',attrs){
          
        }  
    }
}]);

app.directive('childElem',attrs){
          
        }  
    }
}])

app.directive('parentDirective',attrs){
          
        }  
    }
}]);
app.directive('childElem2',attrs){
          
        }  
    }
}])

app.directive('childElem3',attrs){
          
        }  
    }
}])
</script>
</html>

谢谢大家的耐心观看。

angular 自定义指令

angular 自定义指令

一、 id选择器

  1、 文件 app.hightlight.directive.component.ts ：

    

import { Directive, ElementRef, Input } from ''@angular/core'';

@Directive({
    selector: ''#appHightLight'',
})
export class AppHightLightDirective {
    constructor(private el: ElementRef) {

        el.nativeElement.style.background = ''red'';
    }
}

　　

 

 

 效果：

 

 

二： 类选择器：

import { Directive, ElementRef, Input } from ''@angular/core'';

@Directive({
    selector: ''.appHightLight'',
})
export class AppHightLightDirective {
    constructor(private el: ElementRef) {

        el.nativeElement.style.background = ''red'';
    }
}

　　html 文件中：

<div>
  自定义样式
</div>

　　

 

三： 属性选择器

import { Directive, ElementRef, Input } from ''@angular/core'';

@Directive({
    selector: ''[appHightLight]'',
})
export class AppHightLightDirective {
    constructor(private el: ElementRef) {

        el.nativeElement.style.background = ''red'';
    }
}

　　html文件：

<div appHightLight>
  自定义样式
</div>

　　

 三：根据传入的值改变样式：

文件 app.hightlight.directive.component.ts ：

import { Directive, ElementRef, HostListener, Input, OnInit } from ''@angular/core'';

@Directive({
    selector: ''[hightlight]'',
})
export class AppHightLightDirective {
    @input() hightlight: any;
    constructor(private el: ElementRef) {
        alert(this.hightlight)
        console.log("constructor:" + this.hightlight)
        if (this.hightlight == null) {
            el.nativeElement.style.background = ''red'';
        } else {
            el.nativeElement.style.background = "pink";
        }

    }

    ngOnInit(): void {
        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
        //Add ''implements OnInit'' to the class.
        alert("init:" + this.hightlight)
        console.log("init:" + this.hightlight)
        if (this.hightlight == null) {
            this.el.nativeElement.style.background = ''green'';
        } else {
            this.el.nativeElement.style.background = this.hightlight;
        }

    }
}

　　html传入的值：

<div [hightlight]=''"pink"''>
  自定义样式
</div>

　　

 

总结

以上是小编为你收集整理的angular 自定义指令全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/z360519549/p/16122960.html

Angular17之Angular自定义指令详解

Angular17之Angular自定义指令详解

1 什么是HTML

　　HTML文档就是一个纯文本文件，该文件包含了HTML元素、CSS样式以及JavaScript代码；HTML元素是由标签呈现，浏览器会为每个标签创建带有属性的DOM对象，浏览器通过渲染这些DOM节点来呈现内容，用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果。

2 指令的分类

　　组件、属性指令、结构性指令

3 指定义指令常用到的一些常量

　　3.1 Directive

　　　　用于装饰控制器类来指明该控制器类是一个自定义指令控制器类

　　3.2 ElementRef

　　　　作为DOM对象的引用使用，通过构造器进行依赖注入，它的实例代表标注有自定义指令那个元素的DOM对象；每个标注了自定义指令的元素都会自动拥有一个ElementRef对象来作为该元素DOM对象的引用（前提：在自定义指令的控制器中依赖注入了ElementRef）

　　3.3 Render2

　　　　Render2的实例是用来操作DOM节点的，因为Angular不推荐直接操作DOM节点；Render2是从Angular4才开始支持的，之前的版本是使用的Render；每个标注有自定义指令的元素都会拥有一个Render2实例来操作该元素的DOM属性（前提：在自定义指令的控制器中依赖注入了Render2）

　　3.4 HostListener

　　　　用于装饰事件触发方法的注解

4 自定义属性指令

　　一个自定义的属性指令需要一个有@Directive装饰器进行装饰的控制器类

import { Directive } from ''@angular/core'';
@Directive({
 selector: ''[appDirectiveTest02]''
})
export class DirectiveTest02Directive {
 constructor() { }
}

4.1 实现自定义属性指令

　　　　4.1.1 创建自定义属性指令控制类

　　　　　　技巧01：创建一个模块来专门放自定义指令

ng g d directive/test/directive-test02 --spec=false --module=directive

　　　　4.1.2 在控制器类中依赖注入ElementRef　　 

constructor(
 private el: ElementRef
 ) {}

　　　　4.1.3 通过ElementRef实例改变标有自定义指令元素对应的DOM对象的背景颜色　

 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = ''skyblue'';
 }

　　　　4.1.3 在自定义指令模块中指定exports　

　　　　 

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { DirectiveTest01Directive } from ''./test/directive-test01.directive'';
import { SharedModule } from ''../shared/shared.module'';
import { DirectiveTest02Directive } from ''./test/directive-test02.directive'';
@NgModule({
 imports: [
 CommonModule
 ],
 declarations: [
 DirectiveTest01Directive,
 DirectiveTest02Directive],
 exports: [
 DirectiveTest01Directive,
 DirectiveTest02Directive
 ]
})
export class DirectiveModule { }

　　　　4.1.4 将自定义指令模块导入到需要用到指定指令的组件所在的模块中

　　　　　　技巧01：自定义指令一般会被多次用到，所以一般会将自定义指令模块导入到共享模块在从共享模块导出，这样其它模块只需要导入共享模块就可以啦

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { RouterModule } from ''@angular/router'';
import { 
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 MdRadioModule,
 MdRadioButton
 } from ''@angular/material'';
import { FormsModule, ReactiveFormsModule } from ''@angular/forms'';
import { HttpModule } from ''@angular/http'';
import { DirectiveModule } from ''../directive/directive.module''; 
@NgModule({
 imports: [
 CommonModule,
 RouterModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 DirectiveModule,
 MdRadioModule
 ],
 declarations: [],
 exports: [
 CommonModule,
 RouterModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 DirectiveModule,
 MdRadioButton
 ]
})
export class SharedModule { }

　　　　4.1.5 在组件中使用自定组件对应的选择器即可

　　　　　　自定义指令的选择器是由@Directive装饰器的selector元数据指定的

　在元素中直接标注自定义指令的选择器就行啦　　

　　　　

<div>
 <div>实现自定义属性指令</div>
 <div>
 <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div>2018-1-20 22:47:06</div>
</div>

　　　　4.1.6 代码汇总

import { Directive, ElementRef } from ''@angular/core'';
import { OnInit } from ''../../../../node_modules/_@angular_core@4.4.6@@angular/core/src/metadata/lifecycle_hooks'';
@Directive({
 selector: ''[appDirectiveTest02]''
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = ''skyblue'';
 }
}

　　4.2 给自定义属性指令绑定输入属性

　　　　在4.1中实现的自定义属性指令中背景颜色是写死的不能更改，我们可以给指令绑定输入属性实现数据传递，从而达到动态改变的目的

　　　　4.2.1 在自定义属性指令的控制器中添加一个输入属性myColor

import { Directive, ElementRef, OnInit, Input } from ''@angular/core'';
@Directive({
 selector: ''[appDirectiveTest02]''
})
export class DirectiveTest02Directive implements OnInit {
 @Input()
 myColor: string;
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = this.myColor;
 }
}

　　　　4.2.2 在组件中给myColor属性赋值

　　　　　　技巧01：在给输入属性赋值时，等号右边如果不是一个变量就需要用单引号括起来

<div>
 <div>实现自定义属性指令</div>
 <div>
 <button md-raised-button appDirectiveTest02 [myColor]="''red''">实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div>2018-1-20 22:47:06</div>
</div>

　　　　4.2.3 效果展示

　　　　4.2.4 改进

　　　　　　可以通过自定义属性指令的选择器来实现数据传输

　　　　　　》利用自定义属性指令的选择器作为输入属性myColor输入属性的别名

　　　　　　》在组件中直接利用自定义指令的选择器作为输入属性

<div>
 <div>实现自定义属性指令</div>
 <div>
 <button md-raised-button [appDirectiveTest02]="''yellow''">实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div>2018-1-20 22:47:06</div>
</div>

　　　　　　》 效果展示　　　

　

　　4.3 响应用户操作

　　　　在自定义属性指令中通过监听DOM对象事件来进行一些操作

　　　　4.2.1 引入 HostListener 注解并编写一个方法　　　　

　　　　　　技巧01：HostListener注解可以传入两个参数

　　　　　　　　参数1 -> 需要监听的事件名称

　　　　　　　　参数2 -> 事件触发时传递的方法

 @HostListener(''click'', [''$event''])
 onClick(ev: Event) {
  }

　　　　4.2.2 在方法中实现一些操作 

@HostListener(''click'', [''$event''])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === ''green'') {
 this.el.nativeElement.style.backgroundColor = ''skyblue'';
 } else {
 this.el.nativeElement.style.backgroundColor = ''green'';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === ''yellow'') {
 // this.el.nativeElement.style.backgroundColor = ''green'';
 // } else {
 // this.el.nativeElement.style.backgroundColor = ''yellow'';
 // }
 }

　　　　4.2.3 在组件中标记自定义属性指令的选择器就可以啦

<div>
 <div>实现自定义属性指令</div>
 <div>
 <button md-raised-button appDirectiveTest02 >实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div>2018-1-20 22:47:06</div>
</div>

　　　　4.2.4 代码汇总

import { Directive, ElementRef, OnInit, Input, HostListener } from ''@angular/core'';
@Directive({
 selector: ''[appDirectiveTest02]''
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 }
 @HostListener(''click'', [''$event''])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === ''green'') {
 this.el.nativeElement.style.backgroundColor = ''skyblue'';
 } else {
 this.el.nativeElement.style.backgroundColor = ''green'';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === ''yellow'') {
 // this.el.nativeElement.style.backgroundColor = ''green'';
 // } else {
 // this.el.nativeElement.style.backgroundColor = ''yellow'';
 // }
 }
}

总结

以上所述是小编给大家介绍的Angular17之Angular自定义指令详解，希望对大家有所帮助，如果大家有任何疑问欢迎各我留言，小编会及时回复大家的！

您可能感兴趣的文章:
  • Angularjs自定义指令实现三级联动 选择地理位置
  • 详解angular2采用自定义指令（Directive）方式加载jquery插件
  • 在 Angular2 中实现自定义校验指令（确认密码）的方法
  • Angular的自定义指令以及实例
  • AngularJS创建自定义指令的方法详解
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS 自定义指令详解及实例代码
  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
  • 深入讲解AngularJS中的自定义指令的使用
  • 详解AngularJS中自定义指令的使用

angularjs – 在自定义指令中禁用ngClick事件处理

angularjs – 在自定义指令中禁用ngClick事件处理

这是一个指令,我试图根据模型值禁用链接： 
app.directive('disableable',function($parse){
    return {
        restrict: 'C',require: '?ngClick',link: function (scope,elem,attrs,ngClick) {
            if (attrs.disable){
                var disable = $parse(attrs.disable);

                elem.bind('click',function (e) {
                    if (disable(scope)){
                        e.preventDefault();
                        return false;
                    }

                    return true;
                });

                scope.$watch(disable,function (val) {
                    if (val){
                        elem.addClass('disabled');
                        elem.css('cursor','default');
                    }
                    else {
                        elem.removeClass('disabled');
                        elem.css('cursor','pointer');
                    }
                });
             }
         }
     };
});

我希望能够禁用所有链接操作,无论他们是使用简单的href还是ngClick操作.由于preventDefault调用,Hrefs正常工作,但我无法弄清楚如何深入研究ngClick并防止它被触发.我在click事件上执行的绑定不起作用,因为似乎ngClick绑定了我自己无法控制的处理程序.有什么我可以做的吗？

jsfiddle：http://jsfiddle.net/KQQD2/2/

使用event.stopImmediatePropagation.

从MDN开始：

If several listeners are attached to the same element for the same
event type,they are called in order in which they have been added. If
during one such call,event.stopImmediatePropagation() is called,no
remaining listeners will be called.

...
elem.bind('click',function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});
...

WORKING FIDDLE

angularjs – 如何在自定义指令中设置ng-model-options？

angularjs – 如何在自定义指令中设置ng-model-options？

设置控制器链接功能中的$选项似乎适用于去抖动模糊事件： 
controller.$options = {
  updateOn : 'blur',debounce : 3000
};

…但是如果我尝试相同的默认事件,模型永远不会更新：

controller.$options = {
  updateOn : 'default',debounce : 3000
};

当使用ng-model-options指令时,一切都按预期工作.

见http://plnkr.co/edit/KLrSrs2Jw7pkoAUNRJDf?p=preview

看看 source of the ngModelOptions directive,似乎没有设置updateOn：’default’,你需要设置controller.$options.updateOnDefault = true;

关于angular自定义指令中的transclusion以及自定义指令的嵌套和angular自定义指令例子的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于angular 自定义指令、Angular17之Angular自定义指令详解、angularjs – 在自定义指令中禁用ngClick事件处理、angularjs – 如何在自定义指令中设置ng-model-options？等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇angular 的 select 中 ng-options 设置默认值（angular select设置默认选中）

下一篇AngularJS通过post、put提交application/x-www-form-urlencoded的数据

相关文章