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"/> ...
随机推荐
- centos安装lumen
刚开始安装报错,我用的是php7,先安装zip,uzip扩展 yum install zip unzip php7.0-zip 然后通过 Composer 的 create-project 命令来安装 ...
- 设计线程安全的类 VS 发布线程安全的对象
一.设计线程安全的类 步骤: 找出构成对象状态的所有变量 找出约束状态变量的不变性条件 建立对象状态的并发访问策略 1.在现有的线程安全类中添加功能 (1)重用能减低工作量和提高正确性 (2)如果底层 ...
- IDEA 跑spring项目找不到get,set的问题
@Autowired的用法和作用 这个注解就是spring可以自动帮你把bean里面引用的对象的setter/getter方法省略,它会自动帮你set/get. iDEA下安装lombok这个插件就可 ...
- 家里网速北京联通100m光纤
http://www.speedtest.net/ http://cs1.bbn.com.cn:8800/gzweb/index.jsp
- Python报错——module 'scipy.misc' has no attribute 'imresize'
报错是因为要安装PIL库,库名现在为Pillow,在命令行上安装即可: pip3 install Pillow
- 基于nodejs的wiki系统
jingo: https://github.com/claudioc/jingo nodewiki: https://github.com/nhoss2/nodewiki Tidd ...
- js文件操作
IE下 1. 写入 FileSystemObject可以将文件翻译成文件流. 第一步: 例: 复制代码代码如下: Var fso=new ActiveXObject(Scripting.FileSys ...
- Adjust Linux Mint Mouse Scroll (Normal/Reverse)
Set Scroll Normal 1 echo "pointer = 1 2 3 4 5 6 7 8 9 10 11 12" > ~/.Xmodmap && ...
- Python编程-继承和接口
一.继承 1.什么是继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类. 继承的好处: 可以使用现有类的所有功能,并在无 ...
- 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件
效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...