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

在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的按钮。

外界如何调用Scope的方法呢?

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...