2

これは、test という単純なディレクティブを使用した私のコードです。

var app =  angular.module("app",[]);

app.directive('test',function(){
   return {
      link(scope,el,attrs){
        var outerVar = 'im in the outer scope';

        var myFunc = function(){
           var someText = 'just to be able to put a breakpoint here';
        }

        myFunc();

      }
   }
});

var someText にブレークポイントを追加しました。次に、outerVar を入力して、開発ツール コンソールから値を取得しようとしました。

しかし、myFuncを次のように変更すると

var myfuction(){
 console.log(outerVar);
};

私は値を取得しており、さらに、開発ツール コンソールの outVar から値を出力できますが、outVar のみで、scope、el、attrs などの外部変数は出力できません ... また、console.log を実行すると他の変数についても同じ結果が得られます-機能しますが、開発ツールコンソールでは機能しません。

4

1 に答える 1

3

Chrome 開発者ツールは、設定したブレークポイントに到達すると、[ソース] タブと [コンソール] タブにローカル変数とグローバル変数を表示し、それらへのアクセスを提供します。また、ブレークポイントを設定した関数のスコープで使用される場合、「クロージャ」変数のビューとアクセスも提供します。これが、内部で console.log() を呼び出すときに外部変数が表示される理由です。あなたの機能。

ただし、Developer Tools では、ブレークポイントが設定されているスコープ ローカルで使用されていない外部スコープの変数へのアクセスは提供されません。「コンソール」でそのような変数にアクセスし、「ソース」で確認するには、「ソース」の「コール スタック」セクションでブレークポイントより上のスコープを選択できます。

以下は、変数が関数内のブレークポイントから見える場所について説明しているコメント付きの例です。説明している問題はAngular固有のものではないため、AngularJSコードは含まれていません。

// seen as "Global" from breakpoint inside of myFunc or anywhere else
var global = "global"; 

(function() {
  // seen as "Closure" from breakpoint inside of myFunc only if used there 
  var outer = "outer"; 

  function myFunc() {
    // seen as "Local" from breakpoint inside of myFunc
    var inner = 'inner'; 

    // uncomment to see "outer" in Dev Tools
    //outer;

    debugger;
  }      
  myFunc(); 
})( );

プランカー

于 2014-05-05T00:41:45.457 に答える