angularJs 指令的用法
<!DOCTYPE html>
<html ng-app='app'>
<!--
A attribute属性：当做属性来使用
<div xingoo></div>
E element元素：当做标签元素来使用
<xingoo></xingoo>
C class类：当做CSS样式来使用
<div class="xingoo"></div>
M comments注释：当做注释使用（这种方式在1.2版本下亲测不可用！）
-->
<head>
<meta charset="utf-8">
<title translate="TITLE">Basic usage</title>
<style>body { text-align: center; }</style>
</head>
<body ng-controller="ctrl">
<hello></hello>
<label>{{name}}</label>
<input type="text" set-Focus="">
<script type="text/javascript" src="../script/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module('app',[]);
myApp.controller('ctrl', ['$scope', function($scope) {
$scope.name = "姓名";
}]);
myApp.directive('setFocus', function(){
return {
restrict: 'A',//A 表示attribute属性
link: function(scope, element){
element[0].focus();
}
};
});
myApp.directive('hello', function() {
return {
restrict: 'E', //E 表示 element元素
template: '<div>Hi there</div>',
replace: true
};
});
</script>
</body>
</html>
angularJs 指令的用法的更多相关文章
- angularjs 指令—— 绑定策略（@、=、&）
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS指令封装高德地图组件
1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
随机推荐
- Docker安全及日志管理
Docker安全及日志管理 目录 Docker安全及日志管理 一.Docker容器与虚拟机的区别 1. 隔离与共享 2. 性能与损耗 3. 总结 二.Docker存在的安全问题 1. Docker自身 ...
- Kubernetes 集群日志 和 EFK 架构日志方案
目录 第一部分:Kubernetes 日志 Kubernetes Logging 是如何工作的 Kubernetes Pod 日志存储位置 Kubelet Logs Kubernetes 容器日志格式 ...
- Spring系列12： `@Value` `@Resource` `@PostConstruct` `@PreDestroy` 详解
本文内容 @Resource实现依赖注入 @Value详细使用 @PostConstruct @PreDestroy的使用 @Resource实现依赖注入 前面章节介绍了使用@Autowired注入依 ...
- 从零开始学mitmproxy抓包工具
Man In The Middle mitm是Man In The Middle的首字母缩写,意思是位于中间的人,表明mitmproxy是一个代理,可以拦截请求,实现网络抓包.知名的网络抓包工具有Fi ...
- Solution -「多校联训」假人
\(\mathcal{Description}\) Link. 一种物品有 长度 和 权值 两种属性,现给定 \(n\) 组物品,第 \(i\) 组有 \(k_i\) 个,分别为 \((1,a ...
- Solution -「Gym 102798K」Tree Tweaking
\(\mathcal{Description}\) Link. 给定排列 \(\{p_n\}\),求任意重排 \(p_{l..r}\) 的元素后,将 \(\{p_n\}\) 依次插入二叉搜索树 ...
- 带分数--第四届蓝桥杯省赛C++B/C组
第四届蓝桥杯省赛C++B/C组----带分数 思路: 1.先枚举全排列 2.枚举位数 3.判断是否满足要求 这道题也就是n=a+b/c,求出符合要求的abc的方案数.进行优化时,可以对等式进行改写,改 ...
- C#控制树莓派入门
何为树莓派 许久没有写博客了,十二月份西安疫情的影响,居家隔离了一个多月,在其期间,学习了一下树莓派,觉得硬件还是挺有意思的,刚好也看到了巨硬有提供使用c#用来开发树莓派应用的解决方案叫Net Iot ...
- 快来用这款BI分析工具，摆脱数据分析的困扰
互联网.物联网时代,数据激增是正常现象,但这给公司信息部门和数据分析师带来了巨大的工作量.根据以前的分析方法,有必要详细而深入地完成分析报告,即使借助数据分析工具,也要花费大量的时间和人力,更不用说 ...
- 基于隐私保护技术的DNS通信协议介绍
本文提出了一种基于用户数据报协议的DNS传输中用户隐私保护的加密方法:DNSDEA.该方法采用PKI加密体系与DNS协议相融合,不仅解决了域名隐私保护问题,而且与传统DNS体系相兼容,保持了DNS系统 ...