AngularJS（四）——AngularJS與其他框架間的通信問(wèn)題

在一個(gè)web項(xiàng)目中，不能保證只使用一種JavaScript框架，一種常見(jiàn)的情況是同時(shí)使用了jQuery和AngularJS框架進(jìn)行開(kāi)發(fā)；另一種常見(jiàn)的情況是，現(xiàn)需要對(duì)之前完全以jQuery為框架開(kāi)發(fā)的項(xiàng)目擴(kuò)展功能，為了方便需要使用AngularJS。這兩種情況都存在一個(gè)不同框架間互相通信的問(wèn)題。使用以下三種AngularJS方法，如表-1所示，可以較好的解決這一問(wèn)題：

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的渝水網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

表-1 AngularJS方法

有兩點(diǎn)需要特別說(shuō)明一下：

1. handler

這里的handler是一個(gè)接收兩個(gè)參數(shù)的函數(shù)，兩個(gè)參數(shù)分別為被監(jiān)聽(tīng)數(shù)據(jù)改變前的值和被監(jiān)聽(tīng)數(shù)據(jù)改變后的值，形式如下：

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

2. expression

這里的expression有兩種情況，一種情況是字符串，此時(shí)被監(jiān)聽(tīng)的數(shù)據(jù)為$scope[expression]；另一種情況是一個(gè)帶有返回值的函數(shù)，此時(shí)被監(jiān)聽(tīng)的數(shù)據(jù)為函數(shù)的返回值。一般來(lái)說(shuō)，如果要監(jiān)聽(tīng)AngularJS自定義service上用于在不同controller間共享的數(shù)據(jù)時(shí)（關(guān)于在不同controller間共享數(shù)據(jù)這部分內(nèi)容，請(qǐng)參考這里），必須使用上述提到的第二種情況，即expression為一個(gè)帶有返回值的函數(shù)，如：

$scope.$watchCollection(function() {
    return DatashareService.detailInfo;
}, function(newObj, oldObj) {
    //some action
});

下面提供一個(gè)多JavaScript框架協(xié)同使用的例子，在該例中，同時(shí)使用了jQuery UI和AngularJS。通過(guò)AngularJS控制jQuery UI的button是否可以被點(diǎn)擊，通過(guò)點(diǎn)擊jQuery UI的button，在AngularJS中動(dòng)態(tài)顯示button點(diǎn)擊量，頁(yè)面效果如圖1 ~ 圖3所示：

AngularJS（四）——AngularJS與其他框架間的通信問(wèn)題

圖-1 按鈕處于可點(diǎn)擊狀態(tài)

AngularJS（四）——AngularJS與其他框架間的通信問(wèn)題

圖-2 按鈕處于不可點(diǎn)狀態(tài)

AngularJS（四）——AngularJS與其他框架間的通信問(wèn)題

圖-3 點(diǎn)擊按鈕后，點(diǎn)擊量增加

下面分別貼出HTML和JavaScript代碼，重要部分以注釋形式進(jìn)行解釋：

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">
        <h5>AngularJS</h5>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="buttonEnabled"> Enable Button
            </label>
        </div>
        Click counter: {{ clickCounter }}
    </div>
    
    <div id="jqui" class="well">
        <h5>jQuery UI</h5>
        <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元素的代碼，無(wú)需深究
    $('#jqui button').button().click(function(e) {
        // 使用AngularJS自帶元素選擇器，angularRegion為HTML元素的id屬性，注意這里不能用引號(hào)將其引起來(lái)
        // .scope()可以選擇當(dāng)前元素所在的controller中的$scope對(duì)象
        // 即 angular.element(angularRegion).scope() === AngularJS代碼中的$scope
        // 能取到$scope對(duì)象是其他框架與AngularJS交互***最重要***的一點(diǎn)
        // 如果直接 ....scope().handleClick()，則$scope.handlerClick函數(shù)也會(huì)執(zhí)行，但view不會(huì)刷新
        angular.element(angularRegion).scope().$apply('handleClick()');
        // 使用jQuery元素選擇器
        // $('#angularRegion').scope().$apply('handleClick()');
        // $apply()中直接使用表達(dá)式，可以這么做，但并不建議
        // angular.element(angularRegion).scope().$apply('clickCounter = clickCount + 1');
    });
});

/**
 * AngularJS代碼
 */
var app = angular.module("exampleApp", []);
app.controller("simpleCtrl", function($scope, $log) {
    $scope.buttonEnabled = true;  // 標(biāo)識(shí)按鈕是否可以點(diǎn)擊
    $scope.clickCounter = 0;  // 點(diǎn)擊量計(jì)數(shù)器
    $scope.handleClick = function() {  // 遞增按鈕點(diǎn)擊量
        $scope.clickCounter++;
        $log.info("Click Counter Increase, Now clickCounter = ", $scope.clickCounter);
    }
    // 監(jiān)聽(tīng)$scope.buttonEnabled變量，不可使用$scope.buttonEnabled
    $scope.$watch('buttonEnabled', function(newVal) {
        $('#jqui button').button({
            disabled: !newVal
        });
    });

    // 監(jiān)控對(duì)象，可以使用這種方法代替直接監(jiān)聽(tīng)$scope.buttonEnabled變量
    // $scope.settings = {
    //     buttonEnabled: true
    // };
    // $scope.$watchCollection('settings', function(newObj, oldObj) {
    //     $('#jqui button').button({
    //         disabled: !newObj.buttonEnabled
    //     });
    // });
});

在main.js中我們注釋掉了很多代碼，這些代碼可以實(shí)現(xiàn)與其上方代碼相同的功能，有興趣的讀者可以自己試一下。如果需要監(jiān)控對(duì)象，則index.html中也需修改，將

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

修改為

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

相信對(duì)AngularJS雙向綁定有了解的讀者對(duì)此一定不陌生。

只要會(huì)用這三個(gè)方法，在jQuery UI等框架中與AngularJS進(jìn)行通信問(wèn)題也就迎刃而解了。

完。

參考資料：

《Pro AngularJS》作者：Adam Freeman

網(wǎng)站欄目：AngularJS（四）——AngularJS與其他框架間的通信問(wèn)題
鏈接地址：http://aaarwkj.com/article40/gghoeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

AngularJS（四）——AngularJS與其他框架間的通信問(wèn)題

1. handler

2. expression