关于 angular js 的坑

标签：

angular js 很好很强大，但是注意，angular js并不适合操作DOM，虽然在某个版本更新过之后，angular 内部自建了 jqLite 来方便操作DOM，意图取代jquery的位置，真是居心叵测。

其实 angular 最好的地方还是给我们提供了一个新的思维方式，如果你是个新手，想看看传说中的 MVC 是个啥，在 ember, backbong, angular...等等众多框架中犹豫不决，那么推荐先看看angular

当然坑是很多，由于马上 2.* 的版本要出现，所以自然 1.* 就会被慢慢淘汰，不过不妨碍你稍稍了解一下，且在面试中可以聊一聊这个

说一下 angular中的一个大坑，指令，坑在那里？

 1 <div class="container" ng-controller="ccCtrl">
 2     <h2 class="text-center" toggle-class>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2>
 3 </div>
 4 
 5 <script src="js/angular.js"></script>    
 6 <script type="text/javascript">
 7 ‘use strict‘
 8 var app = angular.module(‘ccModule‘, [])
 9 app.controller(‘ccCtrl‘, [‘$scope‘, function($scope){
10         
11     }])
12     .directive(‘toggleClass‘, function(){
13         return function(scope, elem, attrs){
14             elem.bind(‘mouseenter‘, function(){
15                 elem.addClass(‘bg-info‘)
16             })
17             elem.bind(‘mouseleave‘, function(){
18                 elem.removeClass() // 这里的 removeClass 并没有jquery那么强悍
19             })
20         }
21     })
22 </script>

注意 h2 中我添加了一个指令 toggle-class，但是在 js代码中，我指定这个指令的时候 名字需要变成 toggleClass，为啥呢，也就是说横线分割命名和驼峰法命名，这两个命名方法都被限制死了，你换任何一种方法都会出错，即如果指令在 HTML中是 toggleClass,然后在 js 中是 toggleClass，就会出错，或者其他的命名法，都会出错，而且在浏览器控制台里没显示错误在哪儿的。

坑爹啊！！！！

google 强行把自己的命名规范加到我们身上了，自以为了不起，所以其实也许司徒正美君的话是正确的？

大坑2，注意我在 .directive 指令的 js代码里写了 addClass() 和 removeClass()，这两个方法是 ng 封装的 jquery方法，但是并没有全部封装，所以才叫 jqLite，所以在 elem.removeClass() 这里如果不给参数的话， elem的类就不会移除，这让jquery的长期用户蛋疼菊紧，而且 console 不报错，fuuuuuuuuuuuuuuuuuuc！

所以记得下次要这样写哦，elem.removeClass(‘bg-info‘)，给上参数，就可以了。

angular 想要画个大饼，其实已经给我感觉有点膨胀的控制不了了，有那么点目的不明确，有什么功能就往源码里加，什么都想封装，导致 angular 代码非常肥大。

如果你只取用里面的一部分代码，确实让你眼前一亮，但是你要是想控制它的全部，还是推荐你算了吧，没有必要。

所以入坑可以，不要陷得太深，毕竟 google 没有把这个 angular用到自己的 gmail或者其他重要的地方，意味着随时都可能会抛弃用户不再更新

关于 angular js 的坑

标签：

原文地址：http://www.cnblogs.com/ilovezy/p/4560184.html