angular学习笔记(六)-非入侵式javascript
这篇主要讲解非入侵式javascript.
在传统的前端开发中,把js写在html中,称为入侵式的javascript:
<span id="select_area" onclick="..." </span>
这种做法由于没有把视图和行为分离,而且不易于维护管理,所以已经被淘汰掉.
但是,angular通过改进,很好的解决了这个问题.称为声明式事件处理器.
<!DOCTYPE html>
<html ng-app>
<head>
<title>3.1.非入侵式js</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="navBar" ng-controller="NavController">
<span ng-click="doSome()">A</span>
</div>
<div class="content" ng-controller="ContentController">
<span ng-click="doSome()">B</span>
</div>
</body>
</html>
页面中的两个span元素都绑定了点击事件回调:doSome()
使用angular的声明式事件处理器,可以兼容所有的浏览器,并且不会再全局命名空间中进行操作.
比如这里的doSome函数,他们都是在各自的作用域下的函数,作用域取决于元素所在的控制器:
function NavController($scope) {
$scope.doSome = function(){
alert('a')
};
}
function ContentController($scope) {
$scope.doSome = function(){
alert('b')
};
}
所以,angular的事件处理器,看似使用了入侵式的javascript,但其实,它有很好的可读性,简单性,可扩展性.
angular学习笔记(六)-非入侵式javascript的更多相关文章
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- Linux学习笔记(六) 进程管理
1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...
- Java IO学习笔记六：NIO到多路复用
作者:Grey 原文地址:Java IO学习笔记六:NIO到多路复用 虽然NIO性能上比BIO要好,参考:Java IO学习笔记五:BIO到NIO 但是NIO也有问题,NIO服务端的示例代码中往往会包 ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记六：接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- 微信小程序 - 非入侵式布局
非入侵式布局,就是不影响原有内容以及代码,增加用户体验感(UE)的一种方式. 例如我们每个接口必须返回: 0:请求成功 -1:请求失败 .... 这样就便于前端判断数据是否加载成功,然后以客观的方式提 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
随机推荐
- 栈的应用实例——中缀表达式转换为后缀表达式
声明:本程序读入一个中缀表达式,将该中缀表达式转换为后缀表达式并输出后缀表达式. 注意:支持+.-.*./.(),并且输入时每输入完一个数字或符号都要加一个空格,特别注意的是在整个表达式输入完成时也要 ...
- 算法笔记_211:第七届蓝桥杯软件类决赛部分真题(Java语言A组)
目录 1 阶乘位数 2 凑平方数 3 棋子换位 4 机器人塔 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 阶乘位数 阶乘位数 9的阶乘等于:362880 它的二进制表示为:10110001001 ...
- 怎么将txt文件转化为html格式的文件？--极为丑陋的方式
# -*- coding: utf-8 -*- #python 27 #xiaodeng #怎么将txt文件转化为html格式的文件?--极为丑陋的方式 import os #找出所有的txt格式的文 ...
- VMware Player 12.5.0 中文免费版
VMWare Player优点:– 免费的 VMWare Player 体积仅90多MB,相比7百多MB且还要付费的 VMware Workstation 无疑更适合个人用户使用– 主界面清爽简洁,几 ...
- JSP，servlet和数据库之间传值出现乱码的问题
近期困扰我非常久的一个问题最终攻克了,为他我头疼了好几天,问题是JSP通过servlet向数据库传值,查询显示在页面的时候出现了乱码,原先我数据库中有两行带有中文的数据,查询的时候倒是没有出现乱 ...
- LeetCode(35):Palindrome Number
Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...
- C#编写的 8种初级+高级排序方法(转)
摘自:http://blog.csdn.net/mevin/article/details/6714520 程序代码: view plaincopy to clipboard using System ...
- Integer 内部实现
public static void main(String[] args) { Integer in1 = 128; Integer in2 = 128; System.out.println(in ...
- 简单的java实验，涉及到 类继承以及接口问题，方法体的重写（区别于重载）
package test ; abstract class Animal { abstract void cry(); abstract String getAnimalName(); } class ...
- HDUOJ-----1556Color the ball
Color the ball Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...