189 8069 5689

AngularJS(四)——AngularJS与其他框架间的通信问题


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

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的渝水网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

AngularJS(四)——AngularJS与其他框架间的通信问题

表-1 AngularJS方法

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

1. handler

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

var handler = function(newVal, oldVal) {
    //some action
};
2. expression

这里的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所示:

AngularJS(四)——AngularJS与其他框架间的通信问题

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

AngularJS(四)——AngularJS与其他框架间的通信问题

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

AngularJS(四)——AngularJS与其他框架间的通信问题

图-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


当前题目:AngularJS(四)——AngularJS与其他框架间的通信问题
文章URL:http://cdxtjz.cn/article/gghoeo.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。