Wie behandelt man $ ctrl? in AngularJS?

Question

Ich habe eine Methode von einer API. Es gibt eine Zusage zurück, die in ein $ ctrl (?) Objekt aufgelöst wird. Diese Objekte sollten eine Messung enthalten und werden aktualisiert, sobald sie neue Daten erhalten.

getMeasurements.latest(filter)  //only a object to filter through all measurements 
    .then(function (latestMeasurement) { 
     $ctrl.latestMeasurement = latestMeasurement; 
}); 

Mein Problem ist, dass ich nicht weiß, wie man mit diesen Daten arbeiten oder es in meiner HTML-Datei angezeigt werden soll. Wie funktioniert $ ctrl?

Hier ist die documentation der API

Answer 1

$ ctrl ist das Ansichtsmodellobjekt in Ihrem Controller. Dieser $ ctrl ist ein Name, den Sie (vm ist ein weiterer häufigste) wählen, wenn Sie Ihren Code überprüfen Sie die Definition als $ctrl = this; sehen können, sein so im Grunde das this Schlüsselwort der Reglerfunktion.

Also jetzt, wenn Sie $ctrl.latestMeasurement = 'someValue' verwenden, dann ist es wie Sie eine Eigenschaft latestMeasurement Controller-Funktion hinzufügen.

Jetzt, wie man es in HTML benutzt?

Um die latestMeasurement Eigenschaft in HTML-Zugriff auf Ihren Code <h1>{{$ctrl.latestMeasurement}}</h1> haben muss (H1-Tag ist nur ein Beispiel.)

Hier $ ctrl unterscheidet von dem, was ich oben auf Steuerteil erläutert. Hier $ ctrl ist der Wert controllerAs Eigentum des Controllers. Aber $ctrl ist der Standardwert der controllerAs-Eigenschaft, so dass Ihr Code die controllerAs -Eigenschaft nicht definiert, sodass Angular den Standardwert $ctrl in HTML annimmt.

Hier werden die meisten Menschen verwirrt. Also lassen Sie mich erklären,

in Ihrem neuen Controller Angenommen, Sie haben Ihre this Schlüsselwort Variable vm erklärt, und Sie Ihre controllerAs Eigenschaft auf myCtrl, das heißt;

controllerAs: 'myCtrl' bei der Definition der Controller-Eigenschaften.

var vm = this; in Ihrer Controller-Funktion.

In diesem Fall müssen Sie vm für die Einstellung von Werten verwenden, und in HTML müssen Sie myCtrl verwenden. Zum Beispiel

in JS Reglerfunktion vm.test = 'Hello world';

in HTML <span ng-bind="myCtrl.test"></span>

Das Ergebnis Hallo Welt wird auf Ihrer Seite angezeigt werden.

Warum $ ctrl und nicht $ scope?

Das View-Modell Objektmodell-Konzept wird in AngularJS 1.5 eingeführt, es ist tatsächlich Teil der Migration zu Angular 2, wo $ Scope nicht mehr existiert. Also haben sie in 1.5 einen neuen Ansatz eingeführt, aber $ scope nicht vollständig entfernt.

Ich hoffe, die Antwort hat geholfen.

Für grundlegende Javascript Konzepte können Sie http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/

Für detailliertere AngularJS $ ctrl Konzept sehen Sie https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/

Answer 2

Ich nehme an, Sie sind über this toking.

In diesem Fall wird die

$ctrl.latestMeasurement

Dose bedeutet:

$ ctrl, den Controller in dem Sie diesen Code ausführen. Sie können es zum Beispiel durch $ scope ändern und das gleiche Ergebnis erhalten.

neuste Messung, die Variable, in der der letzte Wert der Messung gespeichert werden soll.

Zu meiner Sicht erklären lassen Sie den Code unten

<div ng-app="MeasurementApp"> 
    <div ng-controller="MeasurementController"> 
    <h1>{{latestMeasurement2}}</h1> 
    </div> 
</div> 

Dort sehen Sie eine einfache AngularJS App sehen, die eine variable latestMeasurement2 in einem div und seine Controller namens MeasurementController genannt zeigt. Um den Wert anzuzeigen, überprüfen Sie Ihren Code.

angular.module('MeasurementApp', []) 
    // creating the controller 
    .controller('MeasurementController', function(c8yMeasurements, $scope) { 
     // creating the variable and let it empty by now. 
     $scope.latestMeasurement2 = ""; 
     // Your code 
     var filter = { 
     device: 10300, 
     fragment: 'c8y_Temperature', 
     series: 'T' 
     }; 
     var realtime = true; 
     c8yMeasurements.latest(filter, realtime) 
     .then(function (latestMeasurement) { 
       // The latestMeasurement is where the measurement comes 
       // Here we just assign it into our $scope.latestMeasurement2 
       $scope.latestMeasurement2 = latestMeasurement; 
     }); 
    }); 

Als Dokumentation sagt

// $scope.latestMeasurement2 will be updated as soon as a new measurement is received. 
    $scope.latestMeasurement2 = latestMeasurement; 

hoffe, das hilft!