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>"

}
});

时间: 2024-10-27 12:04:16

AngularJS的指令用法的相关文章

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

跟我学AngularJs:Directive指令用法解读(下)

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

跟我学AngularJs:Directive指令用法解读(上)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要: Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性

AngularJS之指令

紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界. 在上篇博客的前言部分提到,Angular的核心就是对HTML标签的增强.我们用到的诸如ng-app.ng-controller等等这些都是属于Angular指令,具体点,它们为Angular内置的指令. Angular不仅提供了内置指令,它还允许我们自定义指令,不然Angular就太low咯.

angularjs自定义指令绑定策略---‘&’绑定

接着上一篇 理解了"="和"@"绑定之后再来理解"&"绑定,就很简单了,同理,用"桥梁"进行分析,但还是有一些例外的情况,要不然angularjs也不会单独设定一个绑定策略,看案例先: <!DOCTYPE html><html lang="en" ng-app="MyModule"><head>    <meta charset=&quo

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--> <sc

&lt;Linux系统stat指令用法&gt;

stat指令:文件/文件系统的详细信息显示. stat命令主要用于显示文件或文件系统的详细信息,该命令的语法格式如下: -f 不显示文件本身的信息,显示文件所在文件系统的信息 -L 显示符号链接 -t 简洁模式,只显示摘要信息 事实上,stat命令显示的是文件的I节点信息.Linux文件系统以块为单位存储信息,为了找到某一个文件所在存储空间的位置,用I节点对每个文件进行索引. 所谓的I节点,是文件系统管理的一个数据结构,是一个64字节长的表,包含了描述文件所必要的全部信息,其中包含了文件的大小,

Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解

Angularjs 事件指令 input 相关指令 和样式指令DOM 操作指令详解学习要点:1. AngularJs 事件指令2. input 相关指令3. 样式指令4. DOM 操作指令5. ngBind/ngBindHtml/ngBindTemplate 重点6. ng-init ng-mode ng-model-options ng-controler 1. Angularjs 事件指令自己研究:ng-click/dbclickng-mousedown/upng-mouseenter/le

【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)

[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的 是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入.等等. 参考资料: angularjs中文网:http://www.apjs.net/ angularjs官网:http://angula