angular.js之作用域scope'@','=','&'
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<div ng-controller="listCtrl" ng-app="myApp">
<input type="text" ng-model="color">
<!-- <span kid hd-color="color"></span> --> <!--@是单项数据绑定，hd-color="{{color}}"作用域隔离，在view中是以模板“{{}}”的形式；=双向绑定，hd-color="color",在view中直接以属性的形式出现-->
<div kid color="callback()"></div>
</div>
<script type="text/javascript">
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.color="red";
$scope.callback=function(){
return 'a web developer !';
}
});
myApp.directive('kid',function(){
return {
restrict:'AE',
//template:'<div style="color:{{color}}">@符号的学习</div>' ,
template:'<h1>{{color()}}</h1>',
scope:{ /*color:"=hdColor"*//* "@hdColor" */color:'&'} //通过&属性名来调用控制器的函数
}
});
</script>
</div>
</body>
</html>
angular.js之作用域scope'@','=','&'的更多相关文章
- Angular JS 学习之 Scope作用域
1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...
- 学习angular.js的一些笔记想法(上)
1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode
参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-mod ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- Angular.js回想+学习笔记(1)【ng-app和ng-model】
Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src=&qu ...
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- Angular JS - 4 - Angular JS 作用域与控制器对象
1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
随机推荐
- [Angular Tutorial] 5-Filtering Repeaters
在上一步中,我们花了很大功夫来布局应用的基础,所以我们现在做点简单点的吧!我们将会添加一个全文本搜索框(没错,这很简单). ·我们的应用现在会有一个搜索框,注意页面中手机列表的改变取决于用户在搜索框键 ...
- php 显示sqlserver二进制图片
<? header("Content-type:image/ "); // Server in the this format: \ or // , when using a ...
- HDU-1166-敌兵布阵（线段树）
前言: 线段树是一种二叉搜索树,与区间树相似,它将一个区间划分成一些单元区间,每个单元区间对应线段树中的一个叶结点. 对于线段树中的每一个非叶子节点[a,b],它的左儿子表示的区间为[a, ...
- 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（三）
[前言和思路整理] 千呼万唤Shi出来啊(好像也没人呼唤),最近公司项目紧,闲暇时间少更得慢,请见谅. 上一章我们分析并实现了打击物件类BeatObject,和它的父节点BeatObjectColum ...
- #图# #dijkstra# ----- OpenJudge 726:ROADS
OpenJudge 726:ROADS 总时间限制: 1000ms内存限制: 65536kB 描述 N cities named with numbers 1 ... N are connected ...
- 在DataTable数据类型最后增加一列，列名为“Column”，内容都为“AAA”
DataTable dt = new DataTable(); dt.Columns.Add("Column", typeof(string)); foreach (DataRow ...
- C# 程序集 和 反射
.Net反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为.Net的反射机 ...
- fir.im Weekly - 2017 年必须了解的 iOS 开源库
放假的脚步临近,每个人都在期待一个愉悦的春节假期.最近,@张嘉夫 分享了一篇 Medium 上的文章<33 个 2017 年必须了解的 iOS 开源库>,总结了 2016 年最棒的 iOS ...
- .net判断System.Data.DataRow中是否包含某列
大家对将DataRow转成实体对象并不陌生,转成实体的时候一般都会加上这个判断 if (row["字段名"] != null && row["字段名&q ...
- 使用PHP的strstr()函数来统计一段字符串中元音字母的个数(区分大小写)
<?php/**练习:统计一段字符串中所有元音字母的个数(区分大小写)*/$str='This is a test file.'; //原始字符串echo $str.'<br>'; ...