如何处理 $ctrl。在 AngularJS 中?

Posted

技术标签:

【中文标题】如何处理 $ctrl。在 AngularJS 中?【英文标题】:How to handle $ctrl. in AngularJS? 【发布时间】:2018-03-21 16:10:05 【问题描述】:

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

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

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

这里是 API 的documentation

【问题讨论】:

【参考方案1】:

$ctrl 是控制器中的视图模型对象。这个 $ctrl 是您选择的名称(vm 是另一个最常见的名称),如果您检查您的代码,您可以看到定义为 $ctrl = this;,所以基本上它是this 控制器功能的关键字。

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

现在如何在 HTML 中使用它?

要访问 HTML 中的 latestMeasurement 属性,您的代码必须具有 <h1>$ctrl.latestMeasurement</h1>(H1 标记只是一个示例。)

这里 $ctrl 与我上面在控制器部分解释的不同。这里 $ctrl 是用于控制器的 controllerAs 属性的值。但是$ctrlcontrollerAs属性的默认值,所以你的代码可能没有定义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 将显示在您的页面中。

为什么是 $ctrl 而不是 $scope?

视图模型对象模型概念是在 AngularJS 1.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/

【讨论】:

原来如此简单。谢谢你的详细解释。 "但是$ctrlcontrollerAs属性的默认值,所以你的代码可能没有定义controllerAs属性,所以Angular会采用默认值$ctrl HTML." Moneyball.【参考方案2】:

我猜你在谈论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;

希望这会有所帮助!

【讨论】:

$ctrl, the controller where you are running this code. You can change it by $scope for example, and get the same result. 不完全是。在 AngularJS 的最新(我相信是 1.4 之后)版本中,组件控制器默认为 $ctrl,您必须像这样访问模板中的属性。 $scope 将属性隐式抛出到模板作用域中,可以直接访问。 我正在使用 AngularJS 几个星期了。我已经尝试将 $ctrl 更改为 $scope 。我只得到一个空对象。所以我想我必须使用 $ctrl。但我真的不知道怎么做。

以上是关于如何处理 $ctrl。在 AngularJS 中?的主要内容,如果未能解决你的问题,请参考以下文章

登录时如何处理状态(Ionic、Firebase、AngularJS)?

Angularjs如何处理来自php(json)的二维数组

Typescript 和 AngularJS 1.5:如何处理导出类

搜索引擎如何处理AngularJS应用程序?

angularjs 如何处理checkbox

AngularJS - 如何处理 ng-repeat 与预先存在的项目