如何处理 $ctrl.在 AngularJS？

Question

我有一个来自 API 的 Methode。它 returns 一个解析为 $ctrl(?) 对象的承诺。该对象应包含测量值，并在收到新数据时进行更新。

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

我的问题是我不知道如何使用这些数据或将其显示在我的 html 文件中。 $ctrl 是如何工作的？

这里是API

的documentation

Answer 1

我想你是在谈论 this。

在这种情况下，

$ctrl.latestMeasurement

可以表示：

$ctrl，你所在的控制器运行这段代码。例如，您可以通过 $scope 更改它，并获得相同的结果。

latestMeasurement，您要存储最后一个测量值的变量。

为了解释我的观点，请看下面的代码

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

在那里您可以看到一个简单的 angularjs 应用程序，它在 div 中显示一个名为 latestMeasurement2 的变量及其名为 MeasurementController 的控制器。然后，要显示该值，请检查您的代码。

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;

希望对您有所帮助！

Answer 2

$ctrl 是控制器中的视图模型对象。这个 $ctrl 是你选择的名字（vm 是另一个最常见的名字），如果你检查你的代码，你可以看到定义为 $ctrl = this;，所以基本上是控制器函数的this关键字。

所以现在如果您使用 $ctrl.latestMeasurement = 'someValue'，那么就像您在控制器函数中添加属性 latestMeasurement。

现在如何在HTML中使用它？

要访问 HTML 中的最新测量值属性，您的代码必须具有 <h1>{{$ctrl.latestMeasurement}}</h1>（H1 标签只是一个示例。）

这里$ctrl和我上面controller部分解释的不一样。这里的$ctrl是controller的controllerAs属性使用的值。但是$ctrl是controllerAs属性的默认值，所以你的代码可能没有定义controllerAs属性，所以Angular会取默认值$ctrl 在 HTML.

这是大多数人感到困惑的地方。那么让我解释一下，

假设在您的新控制器中您已将 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 将显示在您的页面中。

为什么是 $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/

如何处理 $ctrl.在 AngularJS？

How to handle $ctrl. in AngularJS?

html

angularjs

angularjs-scope

angularjs-components

cumulocity