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