如何从Angular模板调试对象(html文件)

Question

创建模板,我在一些HTML元素中有一些Angular代码:

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

我想调试ng-if条件来检查我的CoursesVm对象的值.例如,我如何在Chrome中执行此操作？

Answer 1

对于寻找Angular(2+)的人,请使用json管道

例如:

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

Answer 2

选项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