2018年4月23随着angular6 发布，我们可以看到在其官方手册中的模板元素章节中增加了一个Element 条目(中文)，通过说明我们可以知道这个功能可以帮助我们将angular以html标签的形式嵌入到非angular的页面环境中。下面我们就通过一个简单的例子演示Angular6中的这一新功能。新建angular工程通过ng命令新建custom-tag工程ng new custom-tagcli新建完相应文件后会通过npm下载所信赖的包，完成后进入目录验证工作空间是否正常。$cd cust...
废话 最近由于项目上需要用到表单验证，前面直接通过 (input) 事件进行数据检查，但是不好和自带的验证器统一，而且也不正统。于是打算研究一下自定义验证器，网上类似的文章很多，但是自己在实现的过程中还是遇到了一些问题。于是还是啰嗦的自己写一篇文章。 正文 这里有官方文档：验证响应式表单，用户的视觉提示，自定义验证器，这篇文章是根据这些文档所来（前面两者就不再赘述比较简单，也说的比较清楚） Angular支持的内置va...
在 Angular 应用中，我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况，但是对于一些特殊的表单控件，例如 input[type=datetime] 、 input[type=file] ，我们需要重写默认的表单绑定方式，让我们绑定的变量不再仅仅只是一个字符串，而是一个 Date 或者 File 对象。为了达成这一目的，我们需要自定义表单控件的 ControlValueAccessor 。 ControlValueAccessor 接口是 ...
在 Angular 中，对于表单元素，通过 [(ngModel)] 即可以简单地实现双向绑定。对于自定义组件而言，希望实现同样的效果可以怎么做呢？ 1 实现自定义组件的 ngModel 指令如果希望自定义组件能够具有与表单元素相同的 ngModel 效果，可以通过在组件内实现 ControlValueAccessor 接口达到目的。 对于 [(ngModel)] ，需要至少实现该接口的如下方法： interface ControlValueAccessor { writeValue(obj: any): voidregisterOnChange(fn: ...
如下所示： //自定义指令 "myEmail"grgApp.directive("myEmail",function(){ return{ restrict:AE, scope:{toDir:@, fromName:@, sendEmail:& }, templateUrl:/htmls/main/html/custom/email.html,} });//控制器中的方法$scope.send=function(msg){ alert("send email! msg: "+msg);}//email.html<div style="width: 100%;height: 100%;color: white;font-size: 0.8rem;"> <label style="width: 100%;height: 15%;" ng-bind="to...
在定义指令的scope属性如果设置成了{}，那就成为了一个独立作用域，如果要传入一个方法，使用&,但是这里的传参有点不一样。 先看下官网解释： & or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:&myAttr }, then isolate scope p...
Angular组件和DOM元素通过事件与外部进行通信，两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button>DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播，事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素，这种传播过程称为事件冒泡。 DOM事件冒泡与Angular可以无缝工作，具体示例如下： import { Component } from @angular/core;@Component({selector: ex...
如下所示： <div ng-app="module" ng-controller="ctrl"><table border="1" width="600"><tr><td>编号</td><td>姓名</td><td>手机号</td></tr><tr ng-repeat="(k,v) in data"><td>{{v.id}}</td><td>{{v.name}}</td><td>{{v.mobile|truncate:4}}</td></tr></table> </div> <script>var m = angular.module(module, []); /*自定义过滤器truncate*/m.filter(truncate,function(){return function(mobile,len){len = len?len:3;return ...
如下所示： <div ng-app="module"><div my-exam></div></div><script>var m = angular.module(module, []);m.directive(myExam, [function () {return {restrict: EA,template: <h1>欢迎浏览泠泠在路上</h1>,/*1.replace值为true的时候，把父级给替换掉，即 <div my-exam></div>变成<h1>欢迎浏览泠泠在路上</h1>*//*2.replace值为false的时候，放到父级的里面，即<div my-exam></div>变成<div my-exam><h1>欢迎浏览泠泠在路上</h1>...
本篇文章介绍2种自定义服务的方式，一种是用factory，一种是用service 一、首先介绍使用factory来进行自定义服务 1.html<div ng-app="module" ng-controller="ctrl"><table border="1" width="600"><tr><td>网站名称</td><td>网址</td></tr><tr ng-repeat="v in data"><td>{{v.name}}</td><td>{{v.url}}</td></tr></table> </div> <script>var m = angular.module(module, []);//factory定义服务videoServerm.factory(videoServer,...
不得不说，和传统的复制黏贴来创建组件的方法相比，使用angular-cli的脚手架功能来创建模块、组件显得非常高效，不仅仅有了创建了文件，还包含了一些必须的代码，同时也将组件导入了最近的模块，一些重复性工作就使用cli可以节省掉。angular提供了丰富的文件类型，但是总归是有些我们自己的项目需要，我们需要创建自定义后缀的组件，这时候就不得不舍弃cli了，那么能不能使用自定义的方式来达到脚手架创建呢？ angular 脚手架创建的...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下： Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max)。 在自定义的指令中，我们可以添加我们的验证方法到ngModelController的$validators对象上。为了取得这个controller对象，我们需要requirengModel指令。 在$valid...
有关自定义指令的scope参数，网上很多文章都在讲这3种绑定方式实现的效果是什么，但几乎没有人讲到底怎么使用，本篇希望聊聊 到底怎么用 这个话题。 一. 自定义指令自定义指令，是 Angularjs 用来实现组件化的方式，相比于 React 和 Vue 的组件化方式，它真的很复杂，自定义指令太重了，它暴露了太多可供定制的参数，以至于普通的开发者完全不知道要用它来做什么而将其束之高阁，毕竟一般的业务逻辑通过controller和service就已经可...
本文对 Angular Schematics 进行了介绍，并创建了一个用于创建自定义 Component 的 Schematics ，然后在 Angular 项目中以它为模板演练了通过 Schematics 添加自定义的 Component 。 1. 什么是 Schematics? 简单来说，Schematics 是一个项目处理工具，可以帮助我们对 Angular 项目中的内容进行成批的处理。 比如我们在是使用 Angular CLI 的时候，可能使用过诸如 ng g c myComponent 之类的命令来帮助我们创建一个新 Component ，...
HTML5原生的表单校验属性（必填，长度限制，取值间隔，正则表达式等等）可以满足普通的校验需求，但是有些场景必须用到自定义校验，比如注册时的密码确认，有比对关系的时间/数值选择， 需要到请求到服务端取值验证等等这里以密码确认为例进行说明。 指令开发表单的验证状态是通过 formContro l的 errors 属性反馈出来的，所以基本的思路肯定就是需要添加校验规则，然后将验证结果添加到formControl实例的errors属性中。那么问题来...