<!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'@','=','&'的更多相关文章

  1. Angular JS 学习之 Scope作用域

    1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...

  2. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  3. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  4. angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode

    参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-mod ...

  5. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  6. Angular.js回想+学习笔记(1)【ng-app和ng-model】

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src=&qu ...

  7. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  8. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  9. Angular JS - 4 - Angular JS 作用域与控制器对象

    1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. HTTP协议快速入门

    一.定义 The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborativ ...

  2. js模块化开发——前端模块化

    在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术 ...

  3. IOS开发缓存机制之—本地缓存机制

    功能需求 这个缓存机制满足下面这些功能. 1.可以将数据缓存到本地磁盘. 2.可以判断一个资源是否已经被缓存.如果已经被缓存,在请求相同的资源,先到本地磁盘搜索. 3.可以判断文件缓存什么时候过期.这 ...

  4. LazyInitializationException--由于session关闭引发的异常

    1,页面中进行person.department.departmentName的读取 2,Action 中只读取了person,事务作用在Service的方法中 3,后台会有org.hibernate ...

  5. delphi BitmapCompress

    unit Unit2; interface uses  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Va ...

  6. 巧用css text-indent减小中文标点符号的占位大小

    由于设计需要,我们的页面中经常会有如下效果: 可是我们实现出来的效果确实这样的: 看起来两行文本没有对齐嘛,仔细检查后原来是[字符的原因,因为是中文标点符号占半个字的位置.不信?选中下汉字标点符号看一 ...

  7. JavaScript基础：创建对象

    先来看两种简单的对象创建方式: 1.Object构造函数方法 var person = new Object(); person.name = "Nicholas"; person ...

  8. CentOS 6一键系统优化 Shell 脚本

    CentOS 6一键系统优化 Shell 脚本 脚本的内容如下: #!/bin/bash#author suzezhi#this script is only for CentOS 6#check t ...

  9. OpenCV 3.2正式发布啦

    2016年12月23号OpenCV社区宣布了OpenCV3.2版本正式发布,这个是在OpenCV3.1版本发布一年以后再次升级.在3.2版本中有总数超过数千个的改进与修正,是OpenCV3.x系列中最 ...

  10. 开源OSS.Social项目进阶介绍和使用展示

    在开源OSS.Social微信项目解析的随笔中,我简单给大家分享了进行中微信项目的概要设计,没有全局介绍,没有详细讲解,也没有如何使用,很多朋友估计匆匆一瞥就忙着抢开工红包去了.本着不能马虎的态度,这 ...