在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示。有时,也希望通过jQuery调用Scope的某个方法。比如以下场景: <div> <button id="jQBtn">jQ B ...
在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的按钮禁用我们可能会这样写:
$('#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++; }})
外界如何调用Scope的方法呢?--先获取Scope,然后使用$apply方法调用Scope内的方法。
$('#jQBtn').on("click", function(){ console.log("JQuery button clicked"); var scope = angular.element(ngSection).scope(); scope.$apply(function(){ scope.jQBtnClick(); });})
原标题:AngularJS中监视Scope变量以及外部调用Scope方法
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。