$ ctrlの処理方法。 AngularJSで？

Question

私はAPIのMethodeを持っています。それは$ ctrl（？）オブジェクトに解決する約束を返します。このオブジェクトには測定値が含まれていて、新しいデータを受信するたびに更新されます。

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

私の問題は、このデータをどのように扱うか、またはhtmlファイルに表示する方法がわかりません。 $ ctrlはどのように機能しますか？

ここで私はあなたがについてthisをtokingていると仮定API

Answer 1

$ ctrlは、コントローラのビューモデルオブジェクトです。この$のCTRLはあなたのコードをチェックする場合は、$ctrl = this;としてコントローラ機能のように、基本的にそのthisキーワードを定義を参照することができ、選択した名前（VM別の最も一般的な名前である）です。

$ctrl.latestMeasurement = 'someValue'を使用している場合は、コントローラの機能にlatestMeasurementというプロパティを追加しているようです。

これはHTMLでどのように使用するのですか？あなたのコードは<h1>{{$ctrl.latestMeasurement}}</h1>を持っている必要がありますHTMLでlatestMeasurementプロパティにアクセスするには

（H1タグは単なる一例である。）

ここの$ CTRLは、私は、コントローラ部に前述したものとは異なっています。ここで、$ ctrlはコントローラのプロパティであるcontrollerAsの値です。ただし$ctrlはcontrollerAsプロパティのデフォルト値です。したがって、コードにはcontrollerAsプロパティが定義されていない可能性があります。したがって、AngularはHTMLでデフォルト値$ctrlを使用します。

これは、ほとんどの人が混乱するところです。だから、

はあなたが変数vmにごthisキーワードを宣言している、とあなたがmyCtrlにごcontrollerAsプロパティを設定して新しいコントローラ、すなわちで想定、私が説明しましょう。

controllerAs: 'myCtrl'コントローラのプロパティを定義します。

var vm = this;あなたのコントローラの機能には、

この場合、jsで値を設定するにはvmを使用し、HTMLではmyCtrlを使用する必要があります。例えば、HTML <span ng-bind="myCtrl.test"></span>でJSコントローラ機能で

vm.test = 'Hello world';

結果こんにちはは、あなたのページに表示されます。

なぜ$ ctrlで、$ scopeではないのですか？

ビューモデルオブジェクトモデルの概念は、AngularJS 1.5で導入されました。実際には、$ scopeはもはや存在しないAngular 2に移行しています。だから1.5で彼らは新しいapprochを導入しましたが、$スコープを完全に削除しませんでした。

回答が役に立ちました。あなたはhttps://johnpapa.net/angularjss-controller-as-and-the-vm-variable/

Answer 2

のdocumentation。この場合

、

$ctrl.latestMeasurement

缶が意味：

の$ CTRL、あなたはこのコードを実行しているコントローラを。例えば、$ scopeでそれを変更して、同じ結果を得ることができます。

latestMeasurement、最後の測定値を保存する変数。私の視点を説明するために

があり

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

以下のコードを見てみましょうあなたはMeasurementControllerと呼ばれるdiv要素とそのコントローラにlatestMeasurement2と呼ばれる変数を示し、単純なangularjsアプリを見ることができます。次に、値を表示するためにコードをチェックします。ドキュメントとして

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; 
     }); 
    }); 

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

は、この情報がお役に立てば幸いです！