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 - 创建自定义指令 ------------- ...
随机推荐
- POJ 2887 Big String(块状链表)
题目大意 给一个字符串,长度不超过 106,有两种操作: 1. 在第 i 个字符的前面添加一个字符 ch 2. 查询第 k 个位置是什么字符 操作的总数不超过 2000 做法分析 好多不同的做法都可以 ...
- C++ string 用法详解
/////////////////////////////////////////////////////////////////////////////////// 任何人对本文进行引用都要标明作者 ...
- 【Machine Learning】wekaの特征选择简介
看过这篇博客的都应该明白,特征选择代码实现应该包括3个部分: 搜索算法: 评估函数: 数据: 因此,代码的一般形式为: AttributeSelection attsel = new Attribut ...
- android xml 常用控件介绍
android常用控件介绍 ------文本框(TextView) ------列表(ListView) ------提示(Toast) ------编辑框(EditText) ...
- java攻城狮之路(Android篇)--ListView与ContentProvider
一.ListView 1.三种Adapter构建ListView ListView添加条目的时候, 可以使用setAdapter(ListAdapter)方法, 常用的ListAdapter有三种 B ...
- WCF学习日记
图书馆借阅了<WCF高级编程>,从6.11开始学习wcf,希望尽快熟悉原理和编程模型以及常用编程方法. WCF是一个平台,也是一个框架,从Net.3.0 就在Net framewo ...
- 【转载】关于Embedded Linux启动的经典问题
转载自:http://linux.chinaunix.net/techdoc/install/2009/04/13/1107608.shtml 发信人: armlinux (armlinux), 信区 ...
- python——第一天
两种循环: for x in …… while range(n) 生成整数序列,并且是从0开始一直到n-1的整数 raw_input() 读取的内容永远以字符串的形式,必须先用 int() 把字符串转 ...
- 妙味5:document.cookie 操作
本地环境中测试需要用fireFox,其它几个浏览器不行,服务器都可以测出正确结果 cookie特点: 1. 如登陆信息存储,同一论坛打开多个页面不用重复登陆,就是通过cookie来存取实现: 2. ...
- 用cart(分类回归树)作为弱分类器实现adaboost
在之前的决策树到集成学习里我们说了决策树和集成学习的基本概念(用了adaboost昨晚集成学习的例子),其后我们分别学习了决策树分类原理和adaboost原理和实现, 上两篇我们学习了cart(决策分 ...