这篇主要讲解非入侵式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. wepy - 使用vsCode编辑器安装插件

    完成后,高亮以及智能补全代码. 1. 首先ctrl+shift+p打开扩展,安装以下三个插件 2. 复制以下文件内容到你的vsCode配置 files.associations { "fil ...

  2. 14.怎样自学Struts2之Struts2类型转换[视频]

    14.怎样自学Struts2之Struts2类型转换[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了.仅仅好传到百度云上: http://pa ...

  3. sp_trace_setfilter sqlserver筛选跟踪或跟踪过滤

    sp_trace_setfilter sp_trace_setfilter [ @traceid = ] trace_id , [ @columnid = ] column_id , [ @logic ...

  4. Redis学习（8）-redis其他特性

    消息订阅与发布 subscribe Channel:订阅频道 psubscribe channel*:批量订阅频道:例如:psubscribe S*,订阅以S开头的频道. publish channe ...

  5. tomcat7.0.27的bio,nio.apr高级运行模式（转）

    一 前言 tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或者启动日志.或者登录他们的默认页面http://localhost:8080/查看其中的服务 ...

  6. linux too many open files报错

    修改方法:vi /etc/security/limits.conf  增加一行,如下: *       -       nofile          65535 修改vi /etc/ssh/sshd ...

  7. 零基础学软件测试V2.0

    关于本教程 本系列是在之前的基础上进行了修改更新,原来的内容显得过于简单,但都是重点,这次对于过于简单部分增加了更详细的内容. 目前国内越来越重视软件测试,人才的缺口也是比较大的,为了帮助大家快速的学 ...

  8. 【laravel5.4】vue分页删除

    1.a标签执行ajax删除,后台删除成功后,执行vue分页对象删除对应数据 VUE.js

  9. java第四章编程题（初学篇）

    代码: /* test.java */ package test; public class test { public static void main(String args[] ) { CPU ...

  10. 转 如何使用Windows Media Load Simulator进行Windows Media服务器性能测试和监控

    Windows Media Load Simulator(WMLS)有两个主要的用途:作为极值或者压力测试工具和在线监视器.   1   极值和压力压力测试:你能够在达到期望的极值压力条件下测试离线的 ...