angularjs - 違い - scope watch




AngularJSを使用してブラウザのコンソールで$ scope変数にアクセスするにはどうすればよいですか? (12)

$ scope変数への参照に近いところにあなたのコードにブレークポイントを入れてください($ scopeは現在の 'plain old JavaScript'スコープにあります)。 次に、コンソールで$ scopeの値を調べることができます。

ChromeのJavaScriptコンソールで$scope変数にアクセスしたいとします。 それ、どうやったら出来るの?

$scopeとmyモジュールmyapp名前を変数としてコンソールに表示することはできません。


Chromeのコンソール:

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

angular.element($0).scope().a
angular.element($0).scope().b

Chromeのコンソール



あなたのコントローラのどこかに(たいてい最後の行は良い場所です)、put

console.log($scope);

内側/暗黙のスコープを見たい場合は、ng-repeatの中で、このようなものが動作します。

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

その後、あなたのコントローラーで

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

上の例では親スコープでshowScope()関数を定義していますが、大丈夫です...子/内/暗黙のスコープはその関数にアクセスでき、スコープはイベントに基づいて出力されます。イベントを発生させた要素

@ jmの提案もうまくいきますが、jsFiddleの中ではうまくいかないと思います。 ChromeのjsFiddleでこのエラーが発生する:

> angular.element($0).scope()
ReferenceError: angular is not defined


これらの答えの多くに1つの注意点があります。コントローラのエイリアスを指定すると、scopeオブジェクトはscope()返されたオブジェクト内のオブジェクトに含まれscope()

たとえば、コントローラディレクティブが次のように作成されているとします。 <div ng-controller="FormController as frm">コントローラのstartDateプロパティにアクセスするには、 angular.element($0).scope().frm.startDateを呼び出しますangular.element($0).scope().frm.startDate


のような要素の範囲にアクセスしたいとします

<div ng-controller="hw"></div>

コンソールで次のように使用できます:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

これにより、その要素のスコープが与えられます。


スコープの外にJavaScript変数を定義し、それをコントローラのスコープに割り当てます。

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

それでおしまい! すべてのブラウザで動作するはずです(少なくともChromeとMozillaではテスト済み)。

それは働いて、私はこのメソッドを使用しています。


他の回答を追加して拡張するには、コンソールで$($0)を入力して要素を取得します。 Angularjsアプリケーションの場合、デフォルトでjQuery Liteバージョンが読み込まれます。

jQueryを使用していない場合、angle.element($ 0)を次のように使用できます。

angular.element($0).scope()

jQueryとバージョンがあるかどうかを確認するには、コンソールで次のコマンドを実行します。

$.fn.jquery

要素を検査した場合、現在選択されている要素はコマンドラインAPIリファレンス$ 0で利用できます。 FirebugとChromeの両方にこのリファレンスがあります。

ただし、Chrome開発者ツールでは、これらの参照を使用して$ 0、$ 1、$ 2、$ 3、$ 4という名前のプロパティで選択された最後の5つの要素(またはヒープオブジェクト)を利用できます。 最も最近選択された要素またはオブジェクトは$ 0として参照され、2番目に最近のものは$ 1などとして参照されます。

Firebugのリファレンスを列挙したコマンドラインAPIリファレンスです

$($0).scope()は要素に関連付けられたスコープを返します。 すぐにそのプロパティを見ることができます。

あなたが使用できるいくつかのものは次のとおりです:

  • 要素の親スコープを表示する:

$($0).scope().$parent

  • あなたもこれをチェーンすることができます:

$($0).scope().$parent.$parent

  • ルートスコープを見ることができます:

$($0).scope().$root

  • 独立したスコープのディレクティブを強調表示した場合は、次のコマンドで見ることができます。

$($0).isolateScope()

詳細と例については、 未知のAngularjsコードをデバッグするためのヒントとコツを参照してください。


私はBaroangがオブジェクトを選択した後にBatarangであることに同意します( angular.element($0).scope()と同じかjQueryでさらに短くなります: $($0).scope() (私のお気に入り))

また、私のようにbody要素の主なスコープがある場合、 $('body').scope()はうまく動作します。


私は通常、そのためにjQuery data()関数を使います:

$($0).data().$scope

ChromeのDOMインスペクタで現在$ 0が選択されています。 $ 1、$ 2 ..などがあらかじめ選択された項目です。


角度で私たちはangle.element()によってjqueryの要素を取得....

angular.element().scope();

例:

<div id=""></div>


開発者ツールのHTMLパネルで要素を選択し、コンソールに次のように入力します。

angular.element($0).scope()

WebKitとFirefoxでは、 $0は要素タブの選択されたDOMノードへの参照です。このようにすると、選択したDOMノードスコープがコンソールに表示されます。

また、以下のように要素IDで範囲をターゲットにすることもできます:

angular.element(document.getElementById('yourElementId')).scope()

アドオン/拡張機能

あなたがチェックアウトしたいかもしれない非常に便利なChrome拡張機能がいくつかあります:

  • Batarang 。 これはしばらくの間行ってきました。

  • ng-inspector 。 これは最新のもので、その名前が示すように、アプリケーションのスコープを検査することができます。

jsFiddleで遊ぶ

jsfiddleを使って作業するときは、URLの最後に/showを追加することで、 表示モードでフィドルを開くことができます。 このように実行すると、 angularグローバルにアクセスできます。 ここで試すことができます:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

AngularJSの前にjQueryをロードすると、 angular.elementをjQueryセレクタに渡すことができます。 コントローラの範囲を調べるには

angular.element('[ng-controller=ctrl]').scope()

ボタンの

 angular.element('button:eq(1)').scope()

... 等々。

実際には、グローバル関数を使用して簡単にすることができます。

window.SC = function(selector){
    return angular.element(selector).scope();
};

今これを行うことができます

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

ここをクリック: http://jsfiddle.net/jaimem/DvRaR/1/show/ : http://jsfiddle.net/jaimem/DvRaR/1/show/





angularjs-scope