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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。