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

2019-11-20 10:43:20

字体：大中小

来源：转载

供稿：网友

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

上一篇：jQuery form插件之formDdata参数校验表单及验证后提交

下一篇：AngularJS使用ngOption实现下拉列表的实例代码