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的按钮禁用我们可能会这样写：

 

$('#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++;  }})

外界如何调用Scope的方法呢？--先获取Scope,然后使用$apply方法调用Scope内的方法。

 

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

原标题：AngularJS中监视Scope变量以及外部调用Scope方法

关键词：JS