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 - 创建自定义指令 ------------- ...
随机推荐
- SSAS：OLE DB 错误: OLE DB 或 ODBC 错误 : Login failed for user 'NT Service\MSSQLServerOLAPService'
问题描述 按照微软官方教程尝试使用SSAS做OLAP时,出现如下错误信息: Severity Code Description Project File Line Suppression State ...
- Android向系统相册中插入图片，相册中会出现两张 一样的图片（只是图片大小不一致）
向系统相册中插入图片调用此方法时,相册中会出现两张一样的图片 MediaStore.Images.Media.insertImage 一张图片是原图一张图片是缩略图.表现形式为:android4.4. ...
- Code the Tree（图论，树）
ZOJ Problem Set - 1097 Code the Tree Time Limit: 2 Seconds Memory Limit: 65536 KB A tree (i.e. ...
- Flex Array 与 ArrayCollection.转自网络
1.array作为控件使用 FLEX3写法: <mx:Array id="barname"> <mx:String>Flash</mx:String& ...
- rspec+rest-client测试第三方web service
如果你手工测试Restful 服务将会是一件非常单调乏味的事情.当然,目前有一些浏览器插件可以通过可视化的界面帮助你手工测试,例如postman.rest console,但是每次系统版本更新,你都需 ...
- Raspberry Pi 3 Model B 安装 OSMC
Raspberry Pi 3 Model B 自身搭载 WIFI 芯片,可直接连接无线网络. 准备 NOOBS 你可以购买预装有 NOOBS 的 SD 卡,或者从树莓派官网 下载 NOOBS.zip ...
- kubernetes学习笔记
docker实现了更便捷的单机容器虚拟化的管理, docker的位置处于操作系统层与应用层之间; 相对传统虚拟化(KVM,XEN): docker可以更加灵活的去实现一些应用层功能, 同时对资源的利用 ...
- css实现高度不固定的div元素模块在页面中水平垂直居中
<!DOCTYPE html><html> <head> <title>Laravel</title> <link ...
- SQL Server 诊断查询-(3)
Query #27 Database Properties -- Recovery model, log reuse wait description, log file size, log u ...
- mysql DDL时出现的锁等待状态
如下表格所示: session1: session2: 10:30:27 root@localhost:[testdb] mysql.sock>select * from t2;+------+ ...