AngularJS的指令用法
scope的绑定策略：
@ ：把当前属性作为字符串传递，你还可以绑定来自外层scope的值，在属性值中插入 {{}}即可
示例代码：
scopeAt.html
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
<fruit food="{{ctrlFood}}"></fruit>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>
scopeAt.js
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
$scope.ctrlFood="香蕉";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
template:"<div>{{flavor}}</div>"
// ,
// link:function(scope,element,attrs){
// scope.flavor=attrs.flavor;
// }
}
});
myModule.directive("food", function() {
return {
restrict:'AE',
scope:{
food:'@'
},
template:"<div>{{food}}</div>"
}
});
AngularJS的指令用法的更多相关文章
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- AngularJS常用指令用法详解
ng-class 1>ng-init ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定 ng-repeat可以绑定数组和 ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
随机推荐
- FileZilla FTP Server 高级防火墙例外
在防火墙中: 在“例外”中,添加端口21,TCP 添加端口50000,TCP (或添加一组端口,一个一个的也行,如果你在软件中选择的是50000-51000,而在这里只打开了50000的单个端口,登录 ...
- 小兔伴伴家庭动物园AR智能早教产品上市
2016年6月,经过乐卓大家庭所有人的共同努力,公司旗下首款新品——小兔伴伴之<家庭动物园>3D智能学习卡正式面世. 每个孩子都应该在合适的时间去体验丰富的声音.色彩和动作,<家庭动 ...
- POJ 3519 Minimal Backgammon
Minimal Backgammon Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 1195 Accepted: 700 ...
- 更改linux文件夹的默认颜色
我不知道正常人看Linux下面文件夹的颜色(默认为深蓝)是不是有点晕晕的,看不清楚,反正对我这样的色弱的人来说,我看着很不爽,所以我到网上去找了一下,如果修改文件夹颜色的方法,网上真实众说纷纭,很多都 ...
- 使用docker搭建nfs实现容器间共享文件
首先介绍下今天的两个主角:nfs和docker nfs 是什么 NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TC ...
- JAVA和C# 3DES加密解密
最近 一个项目.net 要调用JAVA的WEB SERVICE,数据采用3DES加密,涉及到两种语言3DES一致性的问题, 下面分享一下, 这里的KEY采用Base64编码,便用分发,因为Java的B ...
- NSNotification Name 最佳写法
本文主要借探讨NSNotificationName的最佳写法的机会,学习下extern, static, const, #define 和常量指针与指针常量等的特性和用法. 1.NSNotificat ...
- 3.12----对potplayer的使用评价
每一台电脑,除了最底层的操作的系统之外,对用户最重要的组成部分应该就是各类应用程序,毕竟人和计算机之间的交互说到底都是通过各类应用的来完成的,人通过利用这些应用程序来把各种问题转化为计算机可以理解的0 ...
- 更加优雅地搭建SSH框架（使用java配置）
时代在不断进步,大量基于xml的配置所带来的弊端也显而易见,在XML配置和直接注解式配置之外还有一种有趣的选择方式-JavaConfig,它是在Spring 3.0开始从一个独立的项目并入到Sprin ...
- SystemTap了解
SystemTrap是监控和跟踪运行中的Linux内核操作的动态方法. http://www.ibm.com/developerworks/cn/linux/l-systemtap/ 使用System ...