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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
Angular2搜索和重置按钮过场动画
May 24 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
Vue程序调试的方法
Jun 17 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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 setcookie函数的参数说明及其用法
2014/04/20 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python Socket使用实例
2017/12/18 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
简单了解Python write writelines区别
2020/02/27 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
致铅球运动员加油稿
2014/02/13 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python