web-dev-qa-db-ja.com

Angularテンプレート（htmlファイル）からオブジェクトをデバッグする方法

テンプレートを作成すると、いくつかのAngularコードがいくつかのHTML要素内に含まれます。

<button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"
        ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )"
...

Ng-if条件をデバッグして、私のCoursesVmオブジェクトの値を確認します。たとえば、Chrome=でこれを行うにはどうすればよいですか？

javascripthtmlangularjsgoogle-chrome
17
Chicowitz

Angular（2+）を探している人は、json pipeを使用します

たとえば：

 <span>{{ CoursesVm | json }}</span> 
 <textarea>{{ CoursesVm | json }}</textarea>
22
santon

オプション1：コードを変更します（Angular2 +およびAngularJSの場合）

Angular2 +

...コンポーネントにこの時間関数を追加します

_checkIf(value: any){
    debugger;  //open the devtools and go to the view...code execution will stop here!
    //..code to be checked... `value` can be inspected now along with all of the other component attributes
}
_

...ビュー内：デバッグする値を提供する作成された関数で_*ngIf_を追加します

_<button *ngIf="checkIf(CoursesVm)">Button</button>
_

AngularJS

コントローラ関数内の_ng-if_（_(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )_）内のコードを囲み、その関数をデバッグできます。

このようなもの：

_//...controller
function checkIf(){
    debugger;  //open the devtools and go to the view...code execution will stop here!
    //..code to be checked
} 

<!--view supposing myCtrl is the alias for the controller here-->
<button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"
        ng-if="myCtrl.checkIf()"
<!-- ... -->
_

オプション2：直接chrome devtools（AngularJSの場合Angular 1）として一部の人々に知られています）

  • 次のようにスコープをキャプチャします。

    var scope = angular.element(document.getElementById('#btnMainMenu')).scope();

  • このようなオブジェクトへのアクセス（このビューのコントローラーがmyCtrlであると想定）：

_scope.myCtrl.CoursesVm_

6
lealceldeiro