码迷,mamicode.com
首页 > 其他好文 > 详细

angular学习笔记(六)

时间:2014-05-09 04:46:23      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   color   

这篇主要讲解非入侵式javascript.

在传统的前端开发中,把js写在html中,称为入侵式的javascript:

<span id="select_area" onclick="..." </span>

这种做法由于没有把视图和行为分离,而且不易于维护管理,所以已经被淘汰掉.

但是,angular通过改进,很好的解决了这个问题.称为声明式事件处理器.

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

页面中的两个span元素都绑定了点击事件回调:doSome()

使用angular的声明式事件处理器,可以兼容所有的浏览器,并且不会再全局命名空间中进行操作.

比如这里的doSome函数,他们都是在各自的作用域下的函数,作用域取决于元素所在的控制器:

bubuko.com,布布扣
function NavController($scope) {
    $scope.doSome = function(){
        alert(‘a‘)
    };
}
function ContentController($scope) {
    $scope.doSome = function(){
        alert(‘b‘)
    };
}
bubuko.com,布布扣

所以,angular的事件处理器,看似使用了入侵式的javascript,但其实,它有很好的可读性,简单性,可扩展性.

 

angular学习笔记(六),布布扣,bubuko.com

angular学习笔记(六)

标签:style   blog   class   code   java   color   

原文地址:http://www.cnblogs.com/liulangmao/p/3716181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!