web-dev-qa-db-ja.com

$ ctrlを処理する方法。 AngularJSで？

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

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

私の問題は、このデータを操作する方法や、htmlファイルに表示する方法がわからないことです。 $ ctrlはどのように機能しますか？

ここで ドキュメント APIの

htmlangularjsangularjs-scopeangularjs-componentscumulocity
4
Gabriel W.

$ ctrlは、コントローラーのビューモデルオブジェクトです。この$ ctrlは選択した名前です（vmは別の最も一般的な名前です）。コードを確認すると、定義が$ctrl = this;なので、基本的にはコントローラー関数のthisキーワードです。

したがって、$ctrl.latestMeasurement = 'someValue'を使用している場合は、コントローラー関数にプロパティlatestMeasurementを追加しているようなものです。

では、HTMLでそれを使用する方法は？

HTMLのlatestMeasurementプロパティにアクセスするには、コードに<h1>{{$ctrl.latestMeasurement}}</h1>が必要です（H1タグは単なる例です）。

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

これはほとんどの人が混乱するところです。それで説明させてください、

新しいコントローラーで、thisキーワードを変数vmに宣言し、controllerAsプロパティをmyCtrlに設定したと仮定します。

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

コントローラ関数のvar vm = this;。

この場合、jsでは値の設定にvmを使用する必要があり、HTMLではmyCtrlを使用する必要があります。例えば、

jSコントローラー関数でvm.test = 'Hello world';

hTMLで<span ng-bind="myCtrl.test"></span>

結果Hello worldがページに表示されます。

なぜ$ scopeではなく$ ctrlなのですか？

ビューモデルオブジェクトモデルの概念はAngularJS1.5で導入され、実際には$ scopeが存在しないAngular 2への移行の一部です。1.5では新しいアプローチが導入されましたが、$ scopeは削除されませんでした完全に。

答えがお役に立てば幸いです。

基本的なJavascriptの概念については、次を参照してください http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/

AngularJS $ ctrlの概念の詳細については、 https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/ を参照してください。

14
Amir Suhail

this についておしゃべりしていると思います。

この場合、

$ctrl.latestMeasurement

意味することができます：

$ ctrl、このコードを実行しているコントローラー。たとえば、$ scopeで変更しても、同じ結果が得られます。

latestMeasurement、測定値の最後の値を格納する変数。

私の見解を説明するために、以下のコードを見てみましょう

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

Div内のlatestMeasurement2という変数とMeasurementControllerというコントローラーを表示する単純な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;

お役に立てれば！

0
Jorge