在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方法 的相关知识，希望对大家有所帮助。
【AngularJS中监视Scope变量以及外部调用Scope方法】相关文章：
★ 详解AngularJS中$http缓存以及处理多个$http请求的方法