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

前端技术 2023/09/06 JavaScript

在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方法 的相关知识，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/16429

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案