AngularJS
felsökning

Grundläggande felsökning i markering

Omfattningstest & utgång av modell

<div ng-app="demoApp" ng-controller="mainController as ctrl">
    {{$id}}
    <ul>
        <li ng-repeat="item in ctrl.items">
            {{$id}}<br/>
            {{item.text}}
        </li>
    </ul>
    {{$id}}
    <pre>
       {{ctrl.items | json : 2}}
    </pre>
</div>


angular.module('demoApp', [])
.controller('mainController', MainController);

function MainController() {
    var vm = this;
    vm.items = [{
        id: 0,
        text: 'first'
    },
    {
        id: 1,
        text: 'second'
    },
    {
        id: 2,
        text: 'third'
    }];
}

Ibland kan det hjälpa till att se om det finns ett nytt utrymme för att lösa problem med omfång. $scope.$id kan användas i ett uttryck överallt i din markering för att se om det finns ett nytt $ scope.

I exemplet kan du se att utanför ul-taggen är samma räckvidd ($ id = 2) och inuti ng-repeat finns det nya barnomfattningar för varje iteration.

En utgång från modellen i en företikett är användbar för att se din aktuella data. json filtret skapar en snygg formaterad utgång. Pre-taggen används eftersom inuti den taggen kommer alla nya linjetecken \n att visas korrekt.

demo

Använd ng-inspektera kromförlängningen

ng-inspect är en lätt Chrome-förlängning för felsökning av AngularJS-applikationer.

När en nod väljs från elementpanelen visas den omfattningsrelaterade informationen i panelen ng-inspect.

Visar få globala variabler för snabb åtkomst till scope/isolateScope .

$s      -- scope of the selected node
$is     -- isolateScope of the selected node
$el     -- jQuery element reference of the selected node (requiers jQuery)
$events -- events present on the selected node (requires jQuery)

Ger enkel åtkomst till tjänster / fabriker.

Använd $get() att hämta förekomsten av en tjänst / fabrik med namn.

Applikationens prestanda kan övervakas genom att räkna antalet omfattningar, isolateScopes, tittare och lyssnare på applikationen.

Använd $count() att få räkningen av scopes, isolateSopes, tittare och lyssnare.

Obs! Det här tillägget fungerar endast när debugInfo är aktiverat.

Ladda ner ng-inspect här

Få elementets omfattning

I en vinkelapp går allt runt räckvidd, om vi skulle kunna få en elementomfång är det lätt att felsöka vinkelappen. Så får du tillgång till elementets omfattning:

angular.element(myDomElement).scope();
e.g.
angular.element(document.getElementById('yourElementId')).scope()  //accessing by ID

Få kontrollerens omfattning: -

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

Ett annat enkelt sätt att komma åt ett DOM-element från konsolen (som jm nämnde) är att klicka på det i fliken "element" och det lagras automatiskt som $ 0.

angular.element($0).scope();