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 ...
随机推荐
- iOS开发之工欲善其事,必先利其器
SimPholders SimPholders是一个快速简单的小工具,可以帮助开发者快速访问iPhone模拟器应用.它可以访问模拟器的文件夹,重置库和文件,以及删除选定的应用程序. 常规做法 找到Fi ...
- (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点，搜索到子节点显示父节点(filter-node-method)
案例下载:https://gitee.com/tudoumlp/just1.git (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...
- 基于人工智能标记语言 (AIML)和任务型对话系统(Task)的深度智能对话机器人demo
起因 本demo基于基于人工智能标记语言 (AIML)和开放域问答(WebQA)的深度智能对话模型而来 无意间发现一个基于人工智能标记语言 (AIML)和开放域问答(WebQA)的深度智能对话模型,但 ...
- postman常用测试脚本
测试脚本: 设置环境变量 var jsonData = JSON.parse(responseBody); postman.setGlobalVariable("5KMST", j ...
- Solution -「CF 1361E」James and the Chase
\(\mathcal{Description}\) Link. 给定 \(n\) 个点 \(m\) 条边的有向弱连通图.称一个点是"好点"当且仅当从该点出发,不存在到同一点 ...
- gdb调试小技巧
1.进入gdb,需要源码,然后gdb+可执行文件,如果要看代码一起的就gdb+可执行文件+tui 2.设置参数 set args +参数 3.设置断点,可以b +行数或者b+函数名字 4.r就是一直跑 ...
- c++动态内存管理与智能指针
目录 一.介绍 二.shared_ptr类 make_shared函数 shared_ptr的拷贝和引用 shared_ptr自动销毁所管理的对象- -shared_ptr还会自动释放相关联对象的内存 ...
- 什么是Ajax？全面了解
一:Ajax 引入Ajax: 我们知道,前端页面想要和后端进行数据交互,可以通过以下方式 将参数添加到url中,后端通过get方式从url中获取数据 GET请求 前端页面通过form表单,将数据以ge ...
- ISISv4协议测试——网络测试仪实操
文章关键词 ISIS协议:路由协议:协议测试: 一.文章简介: isis是一种与ospf很相似的网络协议(属于动态路由协议),它被应用在巨大规模网络,如运营商以及银行等.同样的它也是基于链路状态算法, ...
- 思迈特软件Smartbi：传统BI被“革命”，AI是BI技术未来的发展趋势
根据IDC报告,2020年中国BI软件存量市场规模为38.2亿元,到2024年,市场规模将达到78.5亿元,未来4年整体市场年复合增长率(CAGR)为19.2%.此外,还有规模达到100亿元的增量市场 ...