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


Posted in Javascript onJanuary 23, 2016

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

Javascript 相关文章推荐
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
jQuery插件开发汇总
May 15 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 #Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 #Javascript
javascript实现全角转半角的方法
Jan 23 #Javascript
jQuery操作Table技巧大汇总
Jan 23 #Javascript
jquery采用oop模式class类的使用示例
Jan 22 #Javascript
jquery日历插件datepicker用法分析
Jan 22 #Javascript
js简单设置与使用cookie的方法
Jan 22 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
浅谈react前后端同构渲染
2017/09/20 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
详解Python验证码识别
2016/01/25 Python
Python之list对应元素求和的方法
2018/06/28 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
介绍下WebSphere的安全性
2013/01/31 面试题
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js