如何处理$ 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中的latestMeasurement属性,您的代码必须具有<h1>{{$ctrl.latestMeasurement}}</h1>(H1标签只是一个示例.)

这里$ ctrl与我在控制器部分上面解释的不同.这里$ ctrl是用于controllerAs控制器属性的值.但是属性$ctrl的默认值controllerAs,因此您的代码可能没有定义controllerAs属性,因此Angular将采用$ctrlHTML中的默认值.

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

假设在您的新控制器中,您已将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中他们引入了新的approch但没有完全删除$ scope.

希望答案有所帮助.

对于基本的Javascript概念,您可以看到http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/

有关更详细的AngularJS $ ctrl概念,请参阅https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/