AngularJS（四）——AngularJS与其余框架间的通讯问题

时间 2019-11-09

原文原文链接

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

表-1 AngularJS方法html

有两点须要特别说明一下：jquery

1. handler

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

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

2. expression

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

$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所示：bootstrap

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

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

图-3 点击按钮后，点击量增长ide

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

index.html文件：

<!DOCTYPE html>
<html ng-app="exampleApp" ng-cloak>
<head>
    <meta charset="utf-8">
    <title>jQuery UI & AngularJS</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" />
</head>
<body>
    <!-- 此div的id后面须要用到 -->
    <div id="angularRegion" class="well" ng-controller="simpleCtrl">
        <h4>AngularJS</h4>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="buttonEnabled"> Enable Button
            </label>
        </div>
        Click counter: {{ clickCounter }}
    </div>
    
    <div id="jqui" class="well">
        <h4>jQuery UI</h4>
        <button>Click Me!</button>
    </div>
    
    <script src="lib/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
    <script src="lib/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <script src="lib/angular.js"></script>
    <!-- 该js文件为本例主要js代码，该文件中的代码在下方提供 -->
    <script src="main.js"></script>
</body>
</html>

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中也需修改，将

<input type="checkbox" ng-model="buttonEnabled"> Enable Button

修改成

<input type="checkbox" ng-model="settings.buttonEnabled"> Enable Button

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

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

完。

参考资料：

《Pro AngularJS》做者：Adam Freeman