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 ...
随机推荐
- 骨牌铺方格[HDU2046]
骨牌铺方格 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- BZOJ3640 : JC的小苹果
设$f[i][j]$表示$hp$为$i$,在$j$点的概率,$d[i]$表示$i$的度数,$w[i]$表示经过$i$点要扣掉的血量. 对于$j$到$k$这条边,$f[i-w[k]][k]+=\frac ...
- （转）Hbase shell 常用命令（1）
Hbase shell 常用命令(1) link:http://blog.csdn.net/scutshuxue/article/details/6988348 下面我们看看HBase Shell的一 ...
- cJSON应用举例
//在网上查了不少cJSON,结果只找到c语言字符串转换到JSON的实例,想转回来结果没有实例.自己琢磨了一个下午才敢下手.下面把转来转去的代码贴上. //百度网盘的 CJSON 实例源码 地址 ht ...
- 描述了say_hello函数的具体内容，调用zend_printf系统函数在php中打印字符串
下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构 ...
- 【液晶模块系列基础视频】1.2.iM_RGB模块介绍
[液晶模块系列基础视频]1.2.iM_RGB模块介绍(上) [液晶模块系列基础视频]1.2.iM_RGB模块介绍(下) ============================== 技术论坛:http ...
- 前端网址收集！Amazing！ 神奇！
(1)Bootstrap中文网 http://www.bootcss.com/ (2)前端编码规范 http://codeguide.bootcss.com/ (3)bootstrap可视化布局+下载 ...
- HDU 1016 DFS
很简单的深搜 只要看出来是深搜... 注意判断最后一点是否与加一为质数 #include<stdio.h> #include<string.h> #include<alg ...
- 根据设备宽高动态设置View的大小
得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...
- 开放平台鉴权以及OAuth2.0介绍
OAuth 2.0 协议 OAuth是一个开发标准,允许用户授权第三方网站或应用访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方网站或分享他们数据的内容. OAuth 2.0 ...