AngularJS（四）——AngularJS与其他框架间的通信问题

2025-02-13 技术教程

在一个web项目中，不能保证只使用一种JavaScript框架，一种常见的情况是同时使用了jQuery和AngularJS框架进行开发；另一种常见的情况是，现需要对之前完全以jQuery为框架开发的项目扩展功能，为了方便需要使用AngularJS。这两种情况都存在一个不同框架间互相通信的问题。使用以下三种AngularJS方法，如表-1所示，可以较好的解决这一问题：

表-1 AngularJS方法

有两点需要特别说明一下：

1. handler

这里的handler是一个接收两个参数的函数，两个参数分别为被监听数据改变前的值和被监听数据改变后的值，形式如下：

varhandler=function(newVal,oldVal){//someaction};2. expression

这里的expression有两种情况，一种情况是字符串，此时被监听的数据为$scope[expression]；另一种情况是一个带有返回值的函数，此时被监听的数据为函数的返回值。一般来说，如果要监听AngularJS自定义service上用于在不同controller间共享的数据时（关于在不同controller间共享数据这部分内容，请参考这里），必须使用上述提到的第二种情况，即expression为一个带有返回值的函数，如：

$scope.$watchCollection(function(){returnDatashareService.detailInfo;},function(newObj,oldObj){//someaction});

下面提供一个多JavaScript框架协同使用的例子，在该例中，同时使用了jQuery UI和AngularJS。通过AngularJS控制jQuery UI的button是否可以被点击，通过点击jQuery UI的button，在AngularJS中动态显示button点击量，页面效果如图1 ~ 图3所示：

图-1 按钮处于可点击状态

图-2 按钮处于不可点状态

图-3 点击按钮后，点击量增加

下面分别贴出HTML和JavaScript代码，重要部分以注释形式进行解释：

index.html文件：

<!DOCTYPEhtml><htmlng-app="exampleApp"ng-cloak><head><metacharset="utf-8"><title>jQueryUI&AngularJS</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><linkrel="stylesheet"href="css/bootstrap-responsive.min.css"/><linkrel="stylesheet"href="lib/jquery-ui-1.11.4/jquery-ui.min.css"/></head><body><divid="angularRegion"class="well"ng-controller="simpleCtrl"><h5>AngularJS</h5><divclass="checkbox"><label><inputtype="checkbox"ng-model="buttonEnabled">EnableButton</label></div>Clickcounter:{{clickCounter}}</div><divid="jqui"class="well"><h5>jQueryUI</h5><button>ClickMe!</button></div><scriptsrc="lib/jquery-ui-1.11.4/external/jquery/jquery.js"></script><scriptsrc="lib/jquery-ui-1.11.4/jquery-ui.min.js"></script><scriptsrc="lib/angular.js"></script><scriptsrc="main.js"></script></body></html>

main.js文件：

/***jQueryUI代码*/$(function(){//.button()为jQueryUI装饰button元素的代码，无需深究$('#jquibutton').button().click(function(e){//使用AngularJS自带元素选择器，angularRegion为HTML元素的id属性，注意这里不能用引号将其引起来//.scope()可以选择当前元素所在的controller中的$scope对象//即angular.element(angularRegion).scope()===AngularJS代码中的$scope//能取到$scope对象是其他框架与AngularJS交互***最重要***的一点//如果直接....scope().handleClick()，则$scope.handlerClick函数也会执行，但view不会刷新angular.element(angularRegion).scope().$apply('handleClick()');//使用jQuery元素选择器//$('#angularRegion').scope().$apply('handleClick()');//$apply()中直接使用表达式，可以这么做，但并不建议//angular.element(angularRegion).scope().$apply('clickCounter=clickCount+1');});});/***AngularJS代码*/varapp=angular.module("exampleApp",[]);app.controller("simpleCtrl",function($scope,$log){$scope.buttonEnabled=true;//标识按钮是否可以点击$scope.clickCounter=0;//点击量计数器$scope.handleClick=function(){//递增按钮点击量$scope.clickCounter++;$log.info("ClickCounterIncrease,NowclickCounter=",$scope.clickCounter);}//监听$scope.buttonEnabled变量，不可使用$scope.buttonEnabled$scope.$watch('buttonEnabled',function(newVal){$('#jquibutton').button({disabled:!newVal});});//监控对象，可以使用这种方法代替直接监听$scope.buttonEnabled变量//$scope.settings={//buttonEnabled:true//};//$scope.$watchCollection('settings',function(newObj,oldObj){//$('#jquibutton').button({//disabled:!newObj.buttonEnabled//});//});});

在main.js中我们注释掉了很多代码，这些代码可以实现与其上方代码相同的功能，有兴趣的读者可以自己试一下。如果需要监控对象，则index.html中也需修改，将

<inputtype="checkbox"ng-model="buttonEnabled">EnableButton

修改为

<inputtype="checkbox"ng-model="settings.buttonEnabled">EnableButton

相信对AngularJS双向绑定有了解的读者对此一定不陌生。

只要会用这三个方法，在jQuery UI等框架中与AngularJS进行通信问题也就迎刃而解了。

完。

参考资料：

《Pro AngularJS》作者：Adam Freeman