angularjs 简单指令
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>angular js</title>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app",[],function(){
console.log("init");
});
app.directive("myDiv",function(){
return {
restrict: "E",
scope: {
myTitle: "=myTitle"
},
template: "<input type='text' data-ng-model='myTitle' /><h1>{{myTitle}}</h1>"
//,replace: true 如果设置为true,template的内容要有个根容器<div><input type='text' data-ng-model='myTitle' /><h1>{{myTitle}}</h1></div>
}
});
var controller = app.controller("myController",function($scope){
$scope.ctrlTitle = "";
});
</script> </head> <body data-ng-controller="myController">
<input type="text" data-ng-model="ctrlTitle" /><br/>
<my-div my-title="ctrlTitle"></my-div> <script type="angular/template" id="template1">
<h1>模板内容</h1>
</script> </body>
</html>
angularjs 简单指令的更多相关文章
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
随机推荐
- PAT 1068. 万绿丛中一点红(20)
对于计算机而言,颜色不过是像素点对应的一个24位的数值.现给定一幅分辨率为MxN的画,要求你找出万绿丛中的一点红,即有独一无二颜色的那个像素点,并且该点的颜色与其周围8个相邻像素的颜色差充分大. 输入 ...
- 【读书笔记】Java核心技术-基础知识-反射
在网页中运行Java程序称为applet. 反射 这项功能被大量地应用于JavaBeans中,它是Java组件的体系结构. 能够分析类能力的程序称为反射(reflective).反射机制的功能及其强大 ...
- Boostrap常用组件英文名
dropdownlisttabsearchVertical TabSidebar with tabssidebarExpandable Panel ListFiltered Attendees Lis ...
- PHP/Yii2操作Cookie,常见问题以及注意事项
设置Cookie PHP setcookie("name", "Larry",time()+3600 Yii2 $cookies = Yii::$app-> ...
- Python学习进程（7）字符串
本节介绍字符串的创建与操作方法. (1)创建字符串: 创建字符串既可以用单引号也可以用双引号: root@SJM:/home/sunjimeng/桌面# cat text.py ...
- hadoop06---多线程
.1.1. 实现线程的两种方式 1.继承Thread的方式 见代码MyThreadWithExtends 2.声明实现 Runnable 接口的方式 见代码MyThreadWithImpliment ...
- tcp/ip 中的分组和分片
osi 大家应该都知道osi七层模型吧,物理层 链路层 网络层 传输层 会话层 表示层 应用层ip 属于网络层,tcp 属于传输层,你可以把每一层想像成粽子的粽叶,包裹了七层的粽子最外面的就是物理层, ...
- HNOI2019梦游记
\(Day_0\) 十点半开始睡觉,开始了八个小时的不眠之夜,整晚都没睡着,这状态明天肯定挂了 \(Day_1\) 开局一条鱼,计算几何只会\(20\) 还是\(T2\)的\(20\)纯暴力好打,\( ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-1{创建APP项目}
快乐学习 Ionic Framework+PhoneGap 手册1-1 * 前提必须安装 Node.js,安装PhoneGap,搭建Android开发环境,建议使用真机调试 {1.1}= 创建APP项 ...
- PHP的垃圾回收机制以及大概实现
垃圾回收,简称gc.顾名思义,就是废物重利用的意思.再说这个之前先接触一下内存泄露,大概意思就是申请了一块地儿拉了会儿屎,拉完之后不收拾,那么这块地就算糟蹋了,地越用越少,最后一地全是屎.说到底一句, ...