在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示。有时，也希望通过jQuery调用Scope的某个方法。
比如以下场景：
rush:js;">
Box" ng-model="jQBtnState"/> Toggle jQ button state
Counter: {{counter}}
以上，我们希望：
● Scope中的jQBtnState变量值如果为false让id为jQBtn的按钮禁用 ● 点击id为jQBtn的按钮调用Scope中的某个方法让Scope中的变量counter自增1
我们可能会这样写：
rush:js;">
$('#jQBtn').on("click",function(){
console.log("JQuery button clicked");
//需要考虑的问题是：
//这里如何调用Scope中的某个方法，使Scope的的变量counter自增1
})
...
rush:js;">
myApp.controller("NGCtrl",function($scope){
$scope.counter = 0;
//这里，怎么让jQBtnState变量值发生变化告之外界呢？
$scope.jQBtnState = false;
$scope.jQBtnClick = function(){
$scope.counter++;
}
})
其实，使用$watch方法可以监视Scope某个变量的变化，当变化发生调用回调函数。
rush:js;">
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的按钮。
rush:js;">
--先获取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方法 的相关知识，希望对大家有所帮助。
原文地址：https://www.jb51.cc/js/50431.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
