这篇主要讲解非入侵式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的更多相关文章

  1. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  2. Linux学习笔记(六) 进程管理

    1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...

  3. Java IO学习笔记六：NIO到多路复用

    作者:Grey 原文地址:Java IO学习笔记六:NIO到多路复用 虽然NIO性能上比BIO要好,参考:Java IO学习笔记五:BIO到NIO 但是NIO也有问题,NIO服务端的示例代码中往往会包 ...

  4. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  6. Typescript 学习笔记六：接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. 微信小程序 - 非入侵式布局

    非入侵式布局,就是不影响原有内容以及代码,增加用户体验感(UE)的一种方式. 例如我们每个接口必须返回: 0:请求成功 -1:请求失败 .... 这样就便于前端判断数据是否加载成功,然后以客观的方式提 ...

  8. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  9. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

随机推荐

  1. Linux操作系统安装与VMTools的安装

    Linux操作系统安装:虚拟机+RedHat 1.安装虚拟机VMware_WorkstationV7.1.3 2.安装RedHat 自动安装(会自动安装VMTools): 打开虚拟机-->新建虚 ...

  2. Linux库的创建和使用

    Linux库的概念 库是一种软件组建技术,里面封装了数据和函数,提供给用户程序调用.使用库能够使程序模块化,提高编译速度,实现代码重用,易于升级. Windows系统提供了大量静态链接库(.lib)和 ...

  3. javascript 设计模式

    了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...

  4. js-取值&赋值-获取某标签某属性的值

      js 取值&赋值-获取某标签某属性的值 CreateTime--2016年10月16日16:35:34 Author:Marydon 1.取值 //方法一 //自定义属性必须用getAtt ...

  5. eclipse Java compiler level does not match the version of the installed Java project facet.

      eclipse Java compiler level does not match the version of the installed Java project facet. Create ...

  6. AsyncTask 异步任务基本使用-下载视频

    概述 android 提供了一个异步任务类AsyncTask,使创建异步任务.更新UI变得更加简单,不再需要编写任务线程和Handler实例即可完成相同的任务.本例子将演示并实现,使用AsyncTas ...

  7. linux配置server笔记

    设置防火墙开放80port -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT 尽管看不懂是什么,可是这个是用于开放80p ...

  8. 利用Windows 2003系统中实现两个网段的路由

    利用Windows 2003系统中实现两个网段的路由 当一个局域网中存在两个以上网段时,分属于不同网段内的主机彼此互不可见.为了解决这个问 题,就必须在不同的网段之间设置路由器.如果花费上万元资金购买 ...

  9. C#将Access数据库导出为JSON

    一个Access数据库包含若干首诗歌,每首诗有content.author.title.description四个字段 using System; using System.Data; using S ...

  10. bootstrap Validators

    地址:http://reactiveraven.github.io/jqBootstrapValidation/