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 ...
随机推荐
- 日期类 Date
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...
- 计算机的网络参考模型与5G协议
计算机的网络参考模型与5G协议 1 分层思想 2 OSI参考模型 3 TCP/IP 协议族的组成 4 数据的封装与解封 5 层间通讯过程 6 空口协议 1.喝可乐的人不一定知道其生产的过 ...
- 如何快速为团队打造自己的组件库（上）—— Element 源码架构
文章已收录到 github,欢迎 Watch 和 Star. 简介 详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础. 如何快速为团队打 ...
- Elementui【tooltip】 在弹框关闭之后再次‘出现’的问题
如图,第一次弹窗进来的时候,符合条件之后,这个提示文字的位置是对的,而且正常显示: 现在点击取消按钮,第二次进入弹窗,如图,提示文字就跑到了左上角,而且输入符合条件的数值之后,会另外显示一个toolt ...
- 如何将VSCode配置上传到gitee账户，简单几步教你实现
众所周知,VSCode是一款功能非常强大的代码编写软件,不仅开源免费,其插件商店也是非常广泛.非常之强大.借助这些插件我们可以配置各种语言环境,也可以运行各种代码. 但随之就有问题出现了,我们在更换设 ...
- 剑指Offer系列_30_包含min函数的栈
以空间换时间: package leetcode.sword_to_offfer.day01; import java.util.Stack; /** * 定义栈的数据结构,请在该类型中实现一个能够得 ...
- 使用 Sa-Token 解决 WebSocket 握手身份认证
前言 相比于 Http 的单项通信方式,WebSocket 可以从服务器向浏览器主动推送消息,这一特性可以帮助我们完成诸如 订单消息推送.IM实时聊天 等一些特定业务. 然而 WebSocket 本身 ...
- Ubuntu18修改系统时间
1. 运行 tzselect 依次选择 Asia -> China -> Beijing Time 2. 复制文件到 /etc 下 sudo cp /usr/share/zoneinfo/ ...
- .NET 云原生架构师训练营（权限系统 代码实现 ActionAccess）--学习笔记
目录 开发任务 代码实现 开发任务 DotNetNB.Security.Core:定义 core,models,Istore:实现 default memory store DotNetNB.Secu ...
- 2021美团安洵暗泉re部分复现
typora-copy-images-to: ./ 安洵杯 sign_in 贪吃蛇 虽然没啥用 smc解密拿一下flag相关的部分 倒着看看sub_40105F 和sub_401055函数 写出解密算 ...