AngularJS中監視Scope變數以及外部呼叫Scope方法

Darren Ji發表於2016-01-23
AngularJS變數

 

在AngularJS中，有時候需要監視Scope中的某個變數，因為變數的改變會影響一些介面元素的顯示。有時，也希望通過jQuery呼叫Scope的某個方法。

比如以下場景：

 

<div>
    <button id="jQBtn">jQ Button</button>
</div>

<div id="ngSection" ng-controller="NGCtrl">
    <input type="checkbox" ng-model="jQBtnState"/> Toggle jQ button state
    <p>Counter: {{counter}}</p>
</div>

 

以上，我們希望：

● Scope中的jQBtnState變數值如果為false讓id為jQBtn的按鈕禁用
● 點選id為jQBtn的按鈕呼叫Scope中的某個方法讓Scope中的變數counter自增1

我們可能會這樣寫：

 

$('#jQBtn').on("click", function(){
    console.log("JQuery button clicked");
    
    //需要考慮的問題是：
    //這裡如何呼叫Scope中的某個方法，使Scope的的變數counter自增1
})


...

myApp.controller("NGCtrl", function($scope){
    $scope.counter = 0;
    
    //這裡，怎麼讓jQBtnState變數值發生變化告之外界呢？
    $scope.jQBtnState = false;
    
    $scope.jQBtnClick = function(){
        $scope.counter++;
    }
})

 

其實，使用$watch方法可以監視Scope某個變數的變化，當變化發生呼叫回撥函式。

 

myApp.controller("NGCtrl", function($scope){
    $scope.counter = 0;
    $scope.jQBtnState = false;
    
    $scope.$watch("jQBtnState", function(newVal){
        $('#jQBtn').attr('disabled', newVal);
    });
    
    $scope.jQBtnClick = function(){
        $scope.counter++;
    }
})

 

以上，當jQBtnState變數值為false的時候就會禁用id為jQBtn的按鈕。

外界如何呼叫Scope的方法呢？

--先獲取Scope,然後使用$apply方法呼叫Scope內的方法。

 

$('#jQBtn').on("click", function(){
    console.log("JQuery button clicked");
    var scope = angular.element(ngSection).scope();
    scope.$apply(function(){
        scope.jQBtnClick();
    });
})

 

以上，通過獲取Scope,使用$apply方法呼叫Scope內的jQBtnClick方法使Scope呢的變數counter自增1。

 

相關文章