浅析Angular 实现一个repeat指令的方法

在项目中常常会使用 ngFor指令，之前只会使用它，具体如何实现的却不得而知。终于这几天有时间"研究"了下它是如何实现的，顺便自己写个简单的 ngFor指令：repeat

说到指令就不得不提一下TemplateRef和ViewContainerRef

TemplateRef 可以理解为dom渲染模板，指令通过TemplateRef的模板来创建dom元素
ViewContainerRef 可以理解为TemplateRef的容器，在调用ViewContainerRef上的createEmbeddedView时，传入TemplateRef和context就能创建出dom元素 此外还需要说明的是Angular的微语法，详见下图。

Angular会把微语法展开成ng-template的形式，支持传入参数， TemplateRef
所关联的则是ng-template内的内容，let variable则是声明变量，如果后面没有赋值操作，则这个变量取默认值。这里取值和createEmbeddedView方法的context相关（后面会细说）。

代码示例：

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({
 selector: "[appRepeat]"
})
export class RepeatDirective {
 constructor(private tpl: TemplateRef<any>, private vc: ViewContainerRef) {}
 @Input() set appRepeatIn(val: Array<any>) {
  val.forEach((item, index) => {
   this.vc.createEmbeddedView(this.tpl, {
    $implicit: item,
    index: index,
    even: index % 2 === 0,
    odd: index % 2 === 1
   });
  });
 }
}
<ul>
 <li
  *appRepeat="
   let item;
   in: items;
   let index = index;
   let even = even;
   let odd = odd;
   let defualt
  "
 >
  <ul class="{{ even ? 'even' : 'odd' }}">
   <li>index: {{ index }}</li>
   <li>item: {{ item }}</li>
   <li>default: {{ defualt }}</li>
   <li>even: {{ even }}</li>
   <li>odd: {{ odd }}</li>
  </ul>
 </li>
</ul>

通过上面的代码可以知道：

let 声明变量(index,even,odd)可以使用createEmbeddedView方法传入context 的属性值(index,even,odd)进行赋值，如果只声明了变量并无赋值操作，则会使用context的属性值($implicit)进行赋值。

keyExp 为 Directive 声明Input属性，Directive的Input属性名格式为"[selector]key",遵循CamelCase命名规则，例如上面的例子:

selector: "appRepeat"
key: "in"

则命名为："appRepeatIn"。

Directive 可以通过Input传入的数据来进行创建页面视图

总结：通过本文可以知道在Angular中如何创建一个简单的结构指令，指令展开的微语法（展开形式，传入数据，赋值操作），使用createEmbeddedView和TemplateRef来创建dom元素。如有疑问，可以查看源代码 或者在下面留言～

以上所述是小编给大家介绍的Angular 实现一个repeat指令的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言小编会及时回复大家的！

赞 (0)

相关推荐

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

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

  • AngularJS ng-repeat指令及Ajax的应用实例分析

    AngularJS ng-repeat指令及Ajax的应用实例分析

    本文实例讲述了AngularJS ng-repeat指令及Ajax的应用.分享给大家供大家参考,具体如下: ng-repeat 指令用于循环输出指定次数的 HTML 元素.集合必须是数组或对象. 定义: <element ng-repeat="expression"></element> 说明:experssion表达式定义了如何循环集合.常用的如:x in records 下面通过一个例子,来说明ng-repeat如何绘制一个表格: <div ng-ap

  • AngularJS学习笔记之基本指令(init、repeat)

    AngularJS学习笔记之基本指令(init.repeat) <h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p>

  • AngularJS使用自定义指令替代ng-repeat的方法

    前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    前言 在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last

  • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

    本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题.分享给大家供大家参考,具体如下: 我们可以使用ng-repeat指令遍历一个JavaScript数组,当数组中有重复元素的时候,AngularJS会报错: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. R

  • AngularJS基础 ng-repeat 指令简单示例

    AngularJS ng-repeat 指令 AngularJS 实例 循环输出多个标题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <

  • 浅析Angular 实现一个repeat指令的方法

    在项目中常常会使用 ngFor指令,之前只会使用它,具体如何实现的却不得而知.终于这几天有时间"研究"了下它是如何实现的,顺便自己写个简单的 ngFor指令:repeat 说到指令就不得不提一下TemplateRef和ViewContainerRef TemplateRef 可以理解为dom渲染模板,指令通过TemplateRef的模板来创建dom元素 ViewContainerRef 可以理解为TemplateRef的容器,在调用ViewContainerRef上的createEmb

  • Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    ng-template 是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用. <ng-template #loading> <button (click)="login()">login</button> <button (click)="sigup()">sigup</button> </ng-template

  • Angular实现一个简单的多选复选框的弹出框指令实例

    Angular实现一个简单的多选复选框的弹出框指令实例

    之前的文章有写过包含树结构下拉框的. 要实现一个包含多个复选框的下拉框该如何做呢? 先上个效果图吧: 代码: <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css"

  • Angular.js通过自定义指令directive实现滑块滑动效果

    前言 最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(directive). 方法如下 1.下面是我html部分代码,detail-scroll是我自定义的标签 ............... <div id="time" style="position: relative;"> <div n

  • 基于angular中的重要指令详解($eval,$parse和$compile)

    在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • Angular.JS中的指令与参数详解

    Angular.JS中的指令与参数详解

    指令,很重要! AngularJS与jQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样. JQuery通过选择器找到DOM元素,再赋予元素的行为: 而AngularJS则是,将指令与DOM绑定在一起,再扩展指令的行为. 所以AngularJS开发最理想的结果就是,在页面HTML与CSS的设计时,设计工程师只需要关注指令的使用:而在背后的逻辑开发上,架构工程师则是不需要知道如何操作DOM,只需要关注指令背后的行为要如何实现就行:测试工程师也可以开发针对指令的单

  • Angular 封装并发布组件的方法示例

    Angular 封装并发布组件的方法示例

    一.封装组件 作为入门,这是一个非常简单的demo,但核心的接收使用者的输入@Input(),以及返回数据给使用者@Output()都实现了,所以有一定的借鉴意义. 目录结构:(部分目录不是框架中自动生成,二是后期添加,按照步骤进行即可.) 具体代码: html:(search.component.html) <input type="text" class="form-control" #info placeholder="{{informatio

  • 深入浅析angular和vue还有jquery的区别

    angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组织是模块化的, angular的view可能仅仅是一个框架, , 对view的dom操作或者时间监听都是在directive中实现的, 而且一般情况下很少直

  • Angular.js中上传指令ng-upload的基本使用教程

    前言 本文主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: Angular上传指令ng-upload的基本使用,包括上传文件,图片,以及图片和视频在线预览,非常强大.ng-upload有两种用法,一种是选择上传文件,仅仅存起来,还有一种就是选择之后,立刻出发一个上传函数,虽然这个函数可以不做http upload的操作. 1.首先包含库文件 <script src="angular.min.js&q

随机推荐