javascript - Angularjs 在写后台管理系统如何优雅的使用jQuery插件

Question

1、angularjs 在后台管理系统中如何优雅的使用jQuery插件；
2、使用jQuery的语法写的话会不会太乱；
3、angular没那么多jQuery的UI插件，第三方贡献者提供的UI插件坑很多；
4、大家在使用angular 写程序中遇到过那些坑，以及是如何解决了，求指点

Answer 1

1 and 2、关于jquery，用angularjs指令完全可以代替，一个好的单页面应用可以完全脱离jquery，因为单页面一般都比较大一点，每个模块之间要隔离开来，jquery的选择器（特别是id选择器）有可能导致每个模块互相影响，可能会很乱。不过不适用jquery是不现实的，我现在更多的使用指令$element来解决问题，迫不得已一定要用选择器而且必须优雅的话，那就给每个html片段加class，像下面的代码

png](http://img.php.cn/upload/image/000/000/000/3b2dfc7c18e0251f892fc3af33efb56f-0.png)
在指令中使用jquery选择器的话 $('.navBar').find('.class')这样来实现选择器

3、bootstrap肯定不会没用过吧！而且bootstrap-ui早已经实现了angularjs指令的封装，比如：tabset分页导航，折叠菜单accordion，bootstrap模态框等等

4、遇到的坑多了去了，不过踩过之后发现貌似人家那种解决方式才是最正确的，比如：
（1）模态框

初始化模态框时定义了controller和windowClass，所以模态框的外层class就是selectDocOrCol，
模态框的controller就是linkModalCtrl，controller不用再在页面上进行ng-controller="linkModalCtrl"这样的指定
（2）ng-class="{}"一定不要忘了引号里还有个{}
...多的就不说了，自己实践出来的坑才能很好的理解

Answer 2

使用Angularjs的第一要点就是要摒弃jquery的思想，既然选择了angular，就不要将angular和jquery放在一起使用，而且angular自带了一些常用的jquery方法，足够了。jquery-ui不是万能的，去找一些angular的ui库，如果不尽如人意就自己动手改造一下，不要拿来主义养成懒惰的心理，很多ui库都要兼容多种浏览器情况而导致代码回比较多，你这一个后台管理程序根本没必要，自己开发反而来的更快些。

Answer 3

不实用angular

Answer 4

封装在directive中即可，ng和用jq并不冲突。directiv封装的脏活累活，实际上还是dom操作。

Answer 5

如果不做移动端的话，直接用就可以了。用angular实现大方向上的页面跳转及数据操作，在需要的地方直接用jq插件就可以了。