[Angular Directive] 1. Write an Angular Directive
Angular 2 Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.
import {Directive, HostBinding} from '@angular/core'; @Directive({
selector: '[myText]'
})
export class TextDirective { @HostBinding() innerText;
constructor() {
this.innerText = "I am text directive!"
}
}
There are tow things important here:
- selector: '[myText]', this is an attr selector.
- HostBinding: Bind to host element's props.
If we using like this:
<div myText>I am a div</div>
<span>I am a span</span>
<hr>
<span myText>My text will be changed!</span>
This directive will change div and last span's innerText to 'I am text directive!'.
[Angular Directive] 1. Write an Angular Directive的更多相关文章
- [Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef
For example we have two buttons: When we click nether one of those tow button, the modal should show ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- angular学习笔记(二)-创建angular模块
如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- angular源码分析:angular中各种常用函数,比较省代码的各种小技巧
angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...
随机推荐
- Angularjs:实现全选
html: <div class="input-group"> <span class="input-group-addon" style=& ...
- natapp解决Invalid Host header的问题
最近在做一个微信公众号项目,用微信开发工具调试本地项目,需要做一下内网穿透,代理都配置好了,页面出现这个Invalid Host header错误,内网穿透工具我是用的frps做的,最后通过googl ...
- Appium_pytest fixture的使用
一.定义fixture方法 # -*- coding:utf-8 -*-import pytestfrom baseutil.DriverUtil import DriverConfig @pytes ...
- liunx中安装禅道
本文转自:https://www.cnblogs.com/bendouyao/p/10026746.html 一.准备工作 禅道安装包ZenTaoPMS.8.1.3.zbox_64.gz,上传至服务器 ...
- CISP/CISA 每日一题 19
CISSP 每日一题(答)What determines how often an audit should be performed? Risk What policy requires u ...
- URL短地址压缩算法 微博短地址原理解析 (Java实现)
原博客地址:http://blog.csdn.net/xyz_lmn/article/details/8057270 最近,项目中需要用到短网址(ShortUrl)的算法,于是在网上搜索一番,发现有C ...
- mycat基本概念及读写分离一
mycat基本概念及读写分离一 目录(?)[+] 安装与启动 mycat目录介绍 mycat三个最重要配置文件 验证读写分离 安装与启动 linux下可以下载Mycat-server-xxxxx.li ...
- [JWT] JWT with HS256
The advantages of JWT over traditional session based validation is: it effectively removing all auth ...
- HTML5梦幻星空,可用作网页背景
<html> <head> <title>星空</title> <META http-equiv="X-UA-Compatible&qu ...
- (转)alter database open resetlogs 的意义
转自:http://blog.sina.com.cn/s/blog_63216bda0100zblr.html Oracle文档中提到,一旦用备份的控制文件进行数据库恢复,就需要使用resetlogs ...