ホームページ > ウェブフロントエンド > jsチュートリアル > スコープ変数を監視し、AngularJS_AngularJS でスコープ メソッドを外部から呼び出す

スコープ変数を監視し、AngularJS_AngularJS でスコープ メソッドを外部から呼び出す

WBOY
リリース: 2016-05-16 15:18:33
オリジナル
1468 人が閲覧しました

AngularJS では、変数の変更が一部のインターフェイス要素の表示に影響を与えるため、スコープ内の変数を監視する必要がある場合があります。場合によっては、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 のボタンをクリックしてスコープ内のメソッドを呼び出し、スコープ内の変数カウンターを 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 メソッドを使用してスコープ内の変数の変更を監視し、変更が発生したときにコールバック関数を呼び出すことができます。

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();
});
}) 
ログイン後にコピー

上記では、スコープを取得して、$apply メソッドを使用してスコープ内の jQBtnClick メソッドを呼び出し、スコープの変数カウンターを 1 増やします。

上記は、AngularJS での Scope 変数の監視と Scope メソッドの外部呼び出しに関する関連知識です。皆様のお役に立てれば幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート