AngularJS中监视Scope变量以及外部调用Scope方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS中监视Scope变量以及外部调用Scope方法相关的知识,希望对你有一定的参考价值。

 

在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。

 

以上是关于AngularJS中监视Scope变量以及外部调用Scope方法的主要内容,如果未能解决你的问题,请参考以下文章

avaScript文件中调用AngularJS内部方法或改变$scope变量

AngularJS 监视对象数组以进行数据更改

如何存储对变量的http angularjs调用响应

外部javascript 方法修改 angularjs 中$rootScope和$scope

AngularJS 指令的 Scope (作用域)

js 调用 angularJs 的方法