AngularJS的指令用法

时间：2022-09-14 10:39:35

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的指令用法的更多相关文章

  1. 学习AngularJs&colon;Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  2. 学习AngularJs&colon;Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  3. AngularJs&colon;Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  4. AngularJS常用指令用法详解

    ng-class 1>ng-init   ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定     ng-repeat可以绑定数组和 ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  7. 浅析AngularJS自定义指令之嵌入&lpar;transclude&rpar;

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  8. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  9. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

随机推荐

  1. web全栈开发之网站开发一（Mac环境配置）

    个人第一次写博客,想给大家分享的是PHP+HTML5+MySQL开发一个个人网站所需的部分技术,希望能帮到志同道合和开发者,别人小白高手勿喷就行 先说一下我在制作这个网站之前的配置: 我用的是MacB ...

  2. 让Chrome 接管邮件连接，收发邮件更方便了

    页面中除了传统的超链接外,还可以将邮箱地址写入<a>标签,意思不表自明,当然是用户点击后就会打开相应的邮件客户端向这个连接指向的邮件地址发邮件. <a href="mail ...

  3. 反人类的MyEclipse之-Javascript双引号自动补全

    MyEclipse由于在JavaScript中按下一个双引号后会自动把后面的双引号补全.本人习惯两个双引号一起按下,那么这个时候在编辑器里就会出现三个",这样导致代码错误. 今天就因为MyE ...

  4. SourceTree - 正在检查源&period;&period;&period; When cloning a repository&comma; &quot&semi;Checking Source&quot&semi; spins forever

    I am trying to clone a repository, my OpenSSH is set up correctly and I can do everything fine in Gi ...

  5. 记录一下JS正则的坑

    JS正则的单行模式有点问题 总之 . 符号匹配换行符号会有问题 暂时的解决方案是 html = html.replace(/[\r\n]/g,""); 附加一个 html = ht ...

  6. Python邮箱客户端编写之接收邮件操作

    Python的POP3类有很多方法来管理邮箱. 首先需要导入poplib库,import poplib POP3(server) 连接到邮箱服务器 user(username)将用户名发送至服务器,等 ...

  7. Python定义常量

    用Python实现常量 定义 # coding=utf-8 # const.py class ConstAssignError(Exception): pass class _const(object ...

  8. php基础之二 函数

    一.语句:分支语句,循环语句 1.分支语句: 1.1 if $a = 7;if($a == 5){ echo "相等";}else{ echo "不相等";} ...

  9. &lbrack;poj3349&rsqb;Snowflake Snow Snowflakes&lowbar;hash

    Snowflake Snow Snowflakes poj-3349 题目大意:给出n片雪花,每片雪花有6个角,每个角有一个权值.如果两片雪花中能够各选出一个点,使得从该点顺时针或者逆时针转,得到的权 ...

  10. HAAR小波

    HAAR小波分解信号或图像的“平滑”部分和“变化”部分(也许所有小波都这样?). 比如信号[1 2 3 4 5 6 7 8] 分解后(不考虑系数): [1.5 3.5 5.5 7.5]         ...

相关文章