ng中directive中的一些符号问题

最新推荐文章于 2020-10-25 22:23:34 发布
最新推荐文章于 2020-10-25 22:23:34 发布
阅读量399 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： js Angular ng directive 指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daiqisi/article/details/70157947
版权 
ng中directive中的一些符号问题
restrict: 'E',
restrict的属性值有E、A、C、M
E:元素，elements are allowed，允许作为一个元素
A:属性，attributes are allowed，允许作为一个属性
C:类，as a class name，作为一个类名
M:注释，as a comment，作为一个注释

可以结合上面的任意值来放松限制。如：'AE','AEC'

很像restrict，独立scope的属性简洁但语法复杂，你可以用符号例如：&，@ 和＝来定义属性的绑定方式。
属性观察器: @
使用 @ 绑定父级作用域监测属性的结果。注意：请记住，当遇到 @时，我们谈论的是观察和属性，而不是绑定到父作用域。
 scope: {
        note: '@'
      }
表达式构造器： &
使用 & 提供一个 表达式解析函数 ，他的上下文是父级作用域。他是在属性里解析表达式的,也构建了一个可重用的功能。
 scope: {
      note: '&'
    }
双向数据绑定：=
使用 = 设置 本地scope与父级scope间的双向数据绑定.
scope: {
      note: '='
    }
 

这是一篇很不错的文章


                

        

        

    




    

      

        

            

              
                
                  十三画13
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
AngularJs directive(指令)

				
			

			

				

					jie310600的博客
				

				

					09-14
					
					91
					
				

			

		

		

			
				
[b]AngularJs directive(指令)[/b]

返回的是一个对象，对象里面定义了一些属性,方法

[code="java"]var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',			...

			
		

	



                

              
                



	

		

			

				
					
理解指令的restrict属性

				
			

			

				

					weixin_33716941的博客
				

				

					07-30
					
					126
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	



                


  
              

                


	

		

			

				
					
AngularJs:Directive指令用法

				
			

			

				

					weixin_30765475的博客
				

				

					10-09
					
					881
					
				

			

		

		

			
				
AngularJs GitHub:https://github.com/angular/angular.js/
AngularJs下载地址：https://angularjs.org/
摘要：Directive（指令）笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作...

			
		

	





	

		

			

				
					
掌握AngularJS指令

				
			

			

				

					代码教主
				

				

					06-08
					
					255
					
				

			

		

		

			
				
指令是AngularJS最强大的组件之一，可帮助您扩展基本HTML元素/属性并创建可重用和可测试的代码。 在本教程中，我将向您展示如何将AngularJS指令与实际最佳实践结合使用。 
 我在这里指的是指令  在教程中主要是自定义指令。 我不会尝试教您如何使用内置指令（例如ng-repeat ， ng-show等）。我将向您展示如何使用自定义指令来创建自己的组件。 
大纲

 简单指令 
 ...

			
		

	



		

			
		



	

		

			

				
					
restrict：限制指令的出现位置

				
			

			

				

					钢ge的博客
				

				

					06-01
					
					640
					
				

			

		

		

			
				
restict属性可以是EACM这四个字母的任意组合，用来限定指令的应用场景。 
  如果不指定这个属性，默认情况下，指令将仅允许被用作元素名和属性名：E - 指令可以作为HTML元素使用
A - 指令可以作为HTML属性使用
C - 指令可以作为CSS类使用
M - 指令可以在HTML注释中使用

			
		

	





	

		

			

				
					
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用

				
			

			

				

					12-29
				

			

		

		

			
				
那么数据交互过程中的几个符号我们一定要有所了解，以及他们的区别是什么，防止我们在运用过程中出错。 1. 首先，我们看一scope作用域下面@的使用： html  <!doctype html> <html ng-app='myApp'>  <...

			
		

	





	

		

			

				
					
angularJS自定义directive之带参方法传递详解

				
			

			

				

					10-17
				

			

		

		

			
				
关键点在于`ng-click="sendEmail({msg: content})"`这里的`sendEmail`是通过&符号绑定的，这意味着它将执行控制器中的`send()`方法，并传入一个对象`{msg: content}`，其中`content`是`textarea`的当前值。...

			
		

	





	

		

			

				
					
AngularJS中isolate scope的用法分析

				
			

			

				

					10-21
				

			

		

		

			
				
在AngularJS中，isolate scope是一种特殊的scope类型，它的主要目的是为了实现指令（directive）的封装和隔离，防止指令内部的scope与父级controller或其它指令的scope产生直接的依赖关系，确保数据交互的安全和可...

			
		

	





	

		

			

				
					
angular-directive-practice

				
			

			

				

					06-04
				

			

		

		

			
				
在"angular-directive-practice"项目中，可能包含了一些自定义指令的示例，这些示例将帮助我们理解如何定义和使用它们。自定义指令可以通过`angular.module.directive`注册，需要提供一个链接函数（link function）...

			
		

	





	

		

			

				
					
C语言中关键字restrict的用法(linux 为 __restrict)

					
热门推荐

				
			

			

				

					ly0303521的专栏
				

				

					09-02
					
					1万+
					
				

			

		

		

			
				
类型限定词restrict
关键字restrict通过允许编译器优化某几种代码增强了计算支持。它只可用于指针，并表明指针是访问一个数据对象的惟一且初始的方式。为了清楚这样做为何有用，我们需要看一些例子。考虑下面的代码：
int ar[10];
int * restrict restar = (int *) malloc(10 * sizeof(int));
int * par = ar;


			
		

	





	

		

			

				
					
ng 命令解析之directive,pipe和service

				
			

			

				

					prayer的博客
				

				

					10-25
					
					442
					
				

			

		

		

			
				
1. ng g service servicename 创建一个服务，可以在多个组件里被调用，且数据保持，于是这个服务就可以用来进行一个特定方法的封装，比如socket,http又或者作为一个传递数据的BUS使用


// store.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StoreService {

  constructor()

			
		

	





	

		

			

				
					
Angular Directive 详解

				
			

			

				

					weixin_34366546的博客
				

				

					05-24
					
					354
					
				

			

		

		

			
				
Angular Directive 学习
学习目的：为了更好的了解 ng directive 的使用方法。

Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令，比如ng-app，ng-controller这些。可以发现个特点，AngularJS自带的指令都是由ng-打头的。


那么，Directive究竟是个怎么样的...

			
		

	





	

		

			

				
					
Angular 指令（Directive）属性型指令

				
			

			

				

					Yuit
				

				

					08-22
					
					839
					
				

			

		

		

			
				
Angular 指令（Directive）属性型指令
  在Angular中有三种指令类型
  
  
  组件 ：拥有模板的指令
  结构型指令：通过添加或移除DOM来改变DOM布局的指令
  属性型指令：改变元素，组件或其他指令的外观和行为的指令
  
自定义指令之后将其到app.moduel中添加即可使用
  @HostListener 监听宿主元素的事件或者是其他元素的事件
示例：   @I

			
		

	





	

		

			

				
					
angular中符号的使用（单引号，反引号）

				
			

			

				

					ngd-b的博客
				

				

					08-23
					
					4966
					
				

			

		

		

			
				
单引号，双引号的使用 ：@Component{
    select:'my-app',
    template:`
        <h2>hello</h2>
    `,
    style:`
    h2{
        color:red;
    }
    `
}
在使用到相关标签语法的使用就不能使用单引号，双引号了，使用的ESC键的下面这个符号’’，称之为撇号，它是与单引号不同

			
		

	





	

		

			

				
					
AngularJS1.x学习（directive 中‘& ’‘=’ ‘@’符号的区别使用）

				
			

			

				

					天外野草技术专栏
				

				

					07-13
					
					7282
					
				

			

		

		

			
				
对于HTML5的兴起，Angular火热绝对值得称赞，外加庞大的社区做支持，是的Angular的普及度越来越高，称为最为流行的html5框架。对于一个html5框架的好坏，我们有几个评判标准， 轻量级，可拓展，易复用，速度快。对组件复用这点，angular以directive的形式展示给开发者，是一个还算不错的选择，作为一个UI组件，必定存在数据交互。那么数据交互过程中的几个符号我们一定要有所了解，

			
		

	





	

		

			

				
					
Angular2 Directive 学习笔记－基础篇

				
			

			

				

					不断成长的我
				

				

					11-18
					
					1万+
					
				

			

		

		

			
				
Angular2 Directive 学习笔记－基础篇在Angular2中有三种类型的指令（Directive） 
1. 组件      — 拥有模板的指令。 
2. 结构型指令 － 通过添加和移除DOM元素来改变DOM结构的指令。例如：NgFor, NgIf … 
3. 属性型指令 - 改变元素显示和行为的指令。例如：NgStyle …Tips: 关于组件型的指令介绍会在专门的文章里面细致的介绍，

			
		

	





	

		

			

				
					
angular directive 总结

				
			

			

				

					雨夜幕雨
				

				

					04-21
					
					7703
					
				

			

		

		

			
				
什么是指令 （directive）自定义HTML元素和属性 
可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素 
的功能。指令的简单实例angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: tr

			
		

	





	

		

			

				
					
你不知道的angularJs内置directive（二）

				
			

			

				

					
				

				

					09-29
					
					1246
					
				

			

		

		

			
				
上篇文章讲解了ng-change，ng-checked，ngClassEven，ngClassOdd，ngCopy，ngCut等一些内置指令，下面将继续说下那些不怎么经常用的ng directive，话不多说，直接进入正题！
1.ngForm
作用：这个Directive实例化了一个FormController来负责表单内的页面逻辑（主要是表单验证）

注意：ngForm不能替代，因为它缺少内置的HTML功能。具体来说，你不能ngForm像标签一样提交。这意味着你要用ngSubmit 将数据发送到服务器。


			
		

	





	

		

			

				
					
Angular 属性型指令 directive

				
			

			

				

					j178202798的博客
				

				

					11-07
					
					1355
					
				

			

		

		

			
				
1.使用命令创建指令    ng  g  d  yourDirectiveName
2.yourDirectiveName.directive.ts代码:

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

@Directive({
   selector:'[appHighlight]' 
})


			
		

	





	

		

			

				
					
vue3中的Directive

					
最新发布

				
			

			

				

					04-03
				

			

		

		

			
				
Vue3中的Directive是一种特殊的指令，它用于操作DOM元素，实现一些特殊的功能，例如输入框自动聚焦、鼠标悬停效果等。Directive可以在模板中使用v-前缀指定，例如v-model、v-if、v-for等。

Vue3中的Directive和Vue2中的Directive有所不同，它采用了新的API来定义和注册Directive。具体来说，Vue3中的Directive由两个函数组成：一个是bind函数，用于在元素第一次被绑定时执行，另一个是update函数，用于在元素的值发生改变时执行。

下面是一个简单的例子，演示了如何在Vue3中定义和使用Directive：

```html
<template>
  <div v-mydirective="value">{{ value }}</div>
</template>

<script>
import { directive } from 'vue';

const mydirective = directive('mydirective', {
  // 在元素第一次被绑定时执行
  beforeMount(el, binding) {
    el.textContent = binding.value;
  },
  // 在元素的值发生改变时执行
  updated(el, binding) {
    el.textContent = binding.value;
  }
});

export default {
  directives: {
    mydirective
  },
  data() {
    return {
      value: 'Hello, world!'
    };
  }
};
</script>
```

在这个例子中，我们定义了一个名为mydirective的Directive，它会在元素第一次被绑定时和值发生改变时执行。我们将它绑定到一个div元素上，并将value作为参数传递给它。在beforeMount和updated函数中，我们分别将元素的textContent设置为value的值。

总的来说，Vue3中的Directive是一个非常强大的功能，它可以帮助我们实现一些复杂的交互效果，提高开发效率。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值