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

在AngularJS的世界里，掌控Scope中的变量至关重要，因为这些变量的变化直接影响着界面元素的展示。有时，我们甚至希望通过jQuery来调用Scope中的方法。接下来，让我们一起如何在AngularJS中监视Scope变量以及从外部调用Scope方法。

设想我们有如下的HTML结构：

```html

```

这里我们有两个目标：

1. 当Scope中的jQBtnState变量值为false时，禁用id为jQBtn的按钮。

2. 点击id为jQBtn的按钮时，调用Scope中的方法使counter变量自增1。

对于第一个目标，我们可以使用$watch来监视Scope中的jQBtnState变量：

```javascript

myApp.controller("NGCtrl", function($scope){

$scope.counter = 0;

$scope.jQBtnState = false;

$scope.$watch("jQBtnState", function(newVal, oldVal){

if(newVal === false){

$('jQBtn').attr('disabled', 'disabled');

} else {

$('jQBtn').removeAttr('disabled');

}

});

$scope.jQBtnClick = function(){

$scope.counter++;

}

})

```

这样，每当jQBtnState的值发生变化时，都会检查其值是否为false，如果是，则禁用id为jQBtn的按钮。

对于第二个目标，我们需要在jQuery的点击事件处理函数中获取Scope，并使用$apply来调用Scope中的方法：

```javascript

$('jQBtn').on("click", function(){

console.log("JQuery button clicked");

var scope = angular.element(document.querySelector('ngSection')).scope();

scope.$apply(function(){

scope.jQBtnClick();

});

})

```

这样，每当点击id为jQBtn的按钮时，都会调用Scope中的jQBtnClick方法，使counter变量自增1。

AngularJS中的Scope变量和方法的监控与调用需要深入理解其工作原理并结合实际需求进行操作。希望大家能对此有更深入的了解和掌握。