AngularJS 在 Ionic 项目中使用 jQuery 库

如果习惯了使用 jQuery,一开始使用 AngularJS 肯定有很多不习惯,特别是要写原生的 Javascript 代码来实现各种功能的时候。

如何把 jQuery 也在 Ionic 使用?首先,导入 jQuery 库的时候要把它放在 AngularJS 前边,如:

<script src="lib/jquery-1.10.2.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>

接下来在使用 jQuery 的时候需要注意不要把script代码放在 .html 文件里使用,最好是在 controller 里使用。

最后还要注意的是对于数据的DOM操作,对于不是 .html 原本有的 DOM,直接使用 jQuery 来操作是不起作用的。

比如使用 ng-repeat 循环输出来的数据,我们可以使用自定义指令 directive,在自定义指令里再使用 jQuery 语句即可,如:

<div class="post" ng-repeat="item in items" post-grid></div>
myApp.directive('postGrid', function(){
return function (scope, element, attr) {
// 此处写相关DOM操作代码,如可以设置元素的CSS,如下使用 jQuery 函数 css() 设置元素的宽高属性。
element.css({"width":100,'height':30});
}
})

使用 jQuery,对界面的操作是不是简单了好多。

相关文章