符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
在一个web项目中,不能保证只使用一种JavaScript框架,一种常见的情况是同时使用了jQuery和AngularJS框架进行开发;另一种常见的情况是,现需要对之前完全以jQuery为框架开发的项目扩展功能,为了方便需要使用AngularJS。这两种情况都存在一个不同框架间互相通信的问题。使用以下三种AngularJS方法,如表-1所示,可以较好的解决这一问题:
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的渝水网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
表-1 AngularJS方法
有两点需要特别说明一下:
这里的handler
是一个接收两个参数的函数,两个参数分别为被监听数据改变前的值和被监听数据改变后的值,形式如下:
var handler = function(newVal, oldVal) { //some action };
这里的expression
有两种情况,一种情况是字符串,此时被监听的数据为$scope[expression]
;另一种情况是一个带有返回值的函数,此时被监听的数据为函数的返回值。一般来说,如果要监听AngularJS自定义service
上用于在不同controller
间共享的数据时(关于在不同controller
间共享数据这部分内容,请参考这里),必须使用上述提到的第二种情况,即expression
为一个带有返回值的函数,如:
$scope.$watchCollection(function() { return DatashareService.detailInfo; }, function(newObj, oldObj) { //some action });
下面提供一个多JavaScript框架协同使用的例子,在该例中,同时使用了jQuery UI和AngularJS。通过AngularJS控制jQuery UI的button是否可以被点击,通过点击jQuery UI的button,在AngularJS中动态显示button点击量,页面效果如图1 ~ 图3所示:
图-1 按钮处于可点击状态
图-2 按钮处于不可点状态
图-3 点击按钮后,点击量增加
下面分别贴出HTML和JavaScript代码,重要部分以注释形式进行解释:
index.html
文件:
jQuery UI & AngularJS AngularJS
Click counter: {{ clickCounter }}jQuery UI
main.js
文件:
/** * jQuery UI代码 */ $(function() { // .button()为jQuery UI装饰button元素的代码,无需深究 $('#jqui button').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代码 */ var app = angular.module("exampleApp", []); app.controller("simpleCtrl", function($scope, $log) { $scope.buttonEnabled = true; // 标识按钮是否可以点击 $scope.clickCounter = 0; // 点击量计数器 $scope.handleClick = function() { // 递增按钮点击量 $scope.clickCounter++; $log.info("Click Counter Increase, Now clickCounter = ", $scope.clickCounter); } // 监听$scope.buttonEnabled变量,不可使用$scope.buttonEnabled $scope.$watch('buttonEnabled', function(newVal) { $('#jqui button').button({ disabled: !newVal }); }); // 监控对象,可以使用这种方法代替直接监听$scope.buttonEnabled变量 // $scope.settings = { // buttonEnabled: true // }; // $scope.$watchCollection('settings', function(newObj, oldObj) { // $('#jqui button').button({ // disabled: !newObj.buttonEnabled // }); // }); });
在main.js
中我们注释掉了很多代码,这些代码可以实现与其上方代码相同的功能,有兴趣的读者可以自己试一下。如果需要监控对象,则index.html
中也需修改,将
Enable Button
修改为
Enable Button
相信对AngularJS双向绑定有了解的读者对此一定不陌生。
只要会用这三个方法,在jQuery UI等框架中与AngularJS进行通信问题也就迎刃而解了。
完。
参考资料:
《Pro AngularJS》 作者:Adam Freeman