$ctrl是控制器中的视图模型对象。这个 $ctrl 是您选择的名称(vm是另一个最常见的名称),如果您检查代码,您可以看到定义为$ctrl = this;
,所以基本上它是this
控制器功能的关键字。
所以现在如果你正在使用$ctrl.latestMeasurement = 'someValue'
,那么就像您正在添加一个属性latestMeasurement
到控制器功能。
现在如何在 HTML 中使用它?
要访问 HTML 中的latestMeasurement 属性,您的代码必须具有<h1>{{$ctrl.latestMeasurement}}</h1>
(H1 标签只是一个示例。)
Here $ctrl与我上面在控制器部分解释的不同。这里 $ctrl 是用于的值controllerAs
控制器的属性。但$ctrl
是默认值controllerAs
属性,所以你的代码可能没有定义controllerAs属性,所以Angular将采用默认值$ctrl
在 HTML 中。
这是大多数人感到困惑的地方。那么让我解释一下,
假设在你的新控制器中你已经声明了你的this
关键字到变量vm
,然后你设置你的controllerAs
财产给myCtrl
, i.e;
controllerAs: 'myCtrl'
定义控制器属性时。
var vm = this;
在你的控制器功能中。
在这种情况下,在 js 中你必须使用vm
用于设置值,在 HTML 中你必须使用myCtrl
。例如,
在 JS 控制器函数中vm.test = 'Hello world';
in 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/ http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/
更详细的 AngularJS $ctrl 概念你可以查看https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/ https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/