如何處理$ ctrl。在AngularJS中？

Question

我有一個來自API的Methode。它返回一個解析爲$ ctrl（？）對象的promise。這個對象應該包含一個度量，並且每當它接收到一個新的數據時都會被更新。

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

我的問題是，我不知道如何處理這些數據或將它顯示在我的html文件中。 $ ctrl如何工作？

這裏的API

Answer 1

$ ctrl是控制器中的視圖模型對象。這$ CTRL是您選擇的名稱（VM是另一個最常見的名字），如果你檢查你的代碼，你可以看到的定義$ctrl = this;，所以基本上它的控制器功能的this關鍵字。

所以現在如果你使用的是$ctrl.latestMeasurement = 'someValue'，那麼它就像你正在給控制器功能添加一個屬性latestMeasurement。

現在如何在HTML中使用它？

要訪問HTML代碼中必須有<h1>{{$ctrl.latestMeasurement}}</h1>的latestMeasurement財產（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>

結果世界，你好將顯示在您的網頁

。

爲什麼$ ctrl而不是$ scope？

視圖模型對象模型概念在AngularJS 1.5中引入，它實際上是遷移到Angular 2的一部分，$ scope不再存在。所以在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/

Answer 2

我想你toking關於this的documentation。

在這種情況下，

$ctrl.latestMeasurement

可以指：

$ CTRL，你在哪裏運行該代碼的控制器。例如，您可以通過$ scope來更改它，並獲得相同的結果。

latestMeasurement，您想要存儲測量值的最後一個值的變量。

解釋我的觀點讓見下文

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

代碼在那裏你可以看到一個簡單的angularjs應用程序，顯示了在一個div及其控制器稱爲MeasurementController稱爲latestMeasurement2變量。然後，要顯示值，請檢查您的代碼。

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; 

希望這有助於！