angularJS自定义指令scope代替link
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="scope">
<hello></hello>
<div ng-controller="h1">
<input type="text" ng-model="hh"/>
<hello1 attr1="hh"></hello1>
</div>
<hr/>
<div ng-controller="h2">
<hello2 greet="alertH(name)"></hello2>
<hello2 greet="alertH(name)"></hello2>
<hello2 greet="alertH(name)"></hello2>
</div>
</body>
<script src="angular.js"></script>
<script>
var app=angular.module("scope",[]);
app.directive("hello",function(){
return{
restrict:"AE",
scope:{},
template:"<div><input type='text' ng-model='name'/> {{name}}</div>",
replace:true
}
});
app.controller("h1",function($scope){
$scope.hh="哈哈";
});
app.directive("hello1", function(){
return{
restrict:"AE",
scope:{
//attr1:"@"//单向传递字符串
attr1:"="//双向绑定字符串
},
template:"<input type='text' ng-model='attr1'/><div>{{attr1}}</div>"
}
}); //scope & 用法
app.controller("h2",function($scope){
$scope.alertH=function(name){
alert("hello "+name);
}
});
app.directive("hello2", function(){
return{
restrict:"AE",
scope:{
//attr1:"@"//单向传递字符串
//attr1:"="//双向绑定字符串
greet:"&"//可绑定非字符串
},
template:"<input type='text' ng-model='userName'/><br/>"+
"<input type='button' value='get' ng-click='greet({name:userName})'/><br/>"
}
});
</script>
</html>
angularJS自定义指令scope代替link的更多相关文章
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
随机推荐
- Win7系统删除微软拼音
微软拼音会在使用Office时偷偷的安装,都找不到删除的地方.在网上找了很多方法都不灵光,最后用下面的方法成功删除. 在语言设置窗口里,重新添加一次这个输入法,确定保存,然后再删除,就行了. 这个 ...
- bzoj1027 [JSOI2007]合金
1027: [JSOI2007]合金 Time Limit: 4 Sec Memory Limit: 162 MBSubmit: 2671 Solved: 703[Submit][Status][ ...
- HDU 2531 (BFS搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2531 题目大意: 你的身体占据多个点.每次移动全部的点,不能撞到障碍点,问撞到目标点块(多个点)的最 ...
- Robotium 测试方法
1.检查CheckBox 是否选上,用solo.isCheckBoxChecked( “text” ). 有时候checkBox 没有相关的text,这时要用solo.isCheckBoxChecke ...
- 用java删除文件夹里的所有文件
import java.io.File; public class Test { public static void main(String args[]){ Test t = new Test() ...
- CentOS Git的还原和操作
$ git log --graph --oneline $ git reset --hard 版本号 用 reflog 挽救错误的重置 [jackluo@localhost demo]$ git re ...
- oracle函数listagg的使用说明(分组后连接字段)
关于oracle函数listagg的使用说明 工作中经常遇到客户提出这样的需求,希望在汇总合并中,能够把日期逐个枚举出来. 如图,原始数据是这样的: 客户希望能够实现这样的汇总合并: 那么通常我会使用 ...
- JS - 超强大文本动画插件Textillate.js
http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.
- 【iHMI43真彩液晶模块】发布新版 DEMO 软件包，版本号为 0.14
新版DEMO软件包主要在以下几个方面进行了改进: 1.改进触摸算法,使用链表注册模式:注册触摸按键后:用户只需要处理事件(event)就行了,其他都由系统完成: 2.改进systick 和 usart ...
- Jquery&JS简单选项卡
结果,如图 为了明显,用绿色+红色 第一步:静态布局 先写html代码和css样式 要点一: ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中 ...