14自定义指令

自定义指令

angular创建指令的方式:

创建一个指令类,掌握了自定义指令的知识,根据业务创建不同的需要用到的指令(有可能自带的指令无法实现所有的需求)

创建一个组件类 @Component

创建一个模块类 @NgModel

创建一个指令类 @Directive

自定义指令的实现步骤

①使用之前,到模块中声明,找到app.module.ts,  import {TestDirective} from ‘./demo10/test.directive‘

  @NgModule({

    declarations:[ TestDirective ]

      })

   

   

②调用自定义指令

  <any  test ></any>

  

  

③给自定义指令指定操作元素的功能

  import { ElementRef } from ‘@angular/core’

  实例化(构造函数中实例化)

  constructor (private el : ElementRef){

    this.el.nativeElement.style.color="blue";

  }

  

  

  

说明:

④组件和指令的关系:组件就是一个带有模板内容的指令

⑤metaData(元数据):每一个类都有自己的元数据,元数据告诉angular 如何处理一个类(就是装饰器中的配置对象),就像组件类要通过selector 告诉 angular 要想调用该组件就得用这个选择器的名字

原文地址:https://www.cnblogs.com/shanlu0000/p/12208632.html

时间: 2024-10-10 01:12:18

14自定义指令的相关文章

Angular自定义指令(directive)

angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content=&quo

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令myStandTable,指令代码大概如下: 1 var myCommon = angular.module("myCommon",[]); 2 myCommon.directive("myStandTable", function () { 3 return { 4 restr

vue.js自定义指令入门

Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一次,当

angular创建自定义指令的四种方式

angular除了内置的部分指令,还可以通过.directive来自定义指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令:nsHeader,在调用时使用需要-来分割:ns-header.自定义指令调用的的方式有四种,如下: 元素名 属性 类名 注释 1.使用元素名调用: 1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head> 4 <meta charset=&q

Vue--由自动获取焦点引出的DOM、mounted、自定义指令

一.自动获取焦点的DOM实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv=&q

AngularJS 自定义指令详解

版权声明:本文为博主原创文章,未经博主允许不得转载. //blog.csdn.net/qq_27626333/article/details/52261409 除了 AngularJS 内置的63个指令外,我们还可以创建自定义指令.你可以使用 .directive 函数来添加自定义的指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive,自定义指令的参数如下: [

vue指令03---自动获取焦点(自定义指令)和过滤器的学习

1.1 自动获取焦点 在自动获取焦点的学习中涉及到了一个钩子函数 mounted(),它表示页面一加载进来就执行函数里面的内容,(和window.onload相似,这样有助于理解),mounted 钩子函数的名字不能随便更改,而且不能写在 methods 属性里面    方法1:  在vue中 通过操作 dom 元素来实现自动获取焦点(即使用原生JS实现) 代码如下: 1 <html lang="en"> 2 <head> 3 <title>自动获取

Vue组件--局部过滤器 和 局部自定义指令

注意:     局部过滤器 和 局部自定义指令 需要在组件内部定义,并且只有当前组件才可以使用,组件外无效 1.  定义局部过滤器 使用filters来定义,他是一个对象,里面是以过滤器名称为名的一个函数,它time是默认的参数,即需要过滤的数据.示例如下 1 <body> 2 <div id="app"> 3 <one></one> <!--应用组件 --> 4 <two></two> 5 </