真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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文件：




    
    jQuery UI & AngularJS
    
    
    


    
    
        AngularJS
        
            
                 Enable Button

Click counter: {{ clickCounter }}

jQuery UI

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