AngularJS 中的 controllerAs
时间:2022-07-23
本文章向大家介绍AngularJS 中的 controllerAs,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
AngularJS 中的 controllerAs
Controller
在 AngularJS 应用中可以说是无处不在, 可以在 html 中通过 ngController
指令来指定 Controller
, 语法为:
<ANY
ng-controller="expression">
...
</ANY>
在 ngRoute
模块中使用, 语法为:
$routeProvider
.when('/my-url', {
controller: 'MyController'
});
在 ui.route
模块中使用, 语法为:
$stateProvider
.state('myState', {
controller: 'MyController'
})
上面用法在 AngularJS 的社区、示例程序中非常普遍。 但是, 有一个细节可能很多人没有注意到, 那就是 controllerAs
, 上面的三种用法还可以分别这样使用:
<ANY
ng-controller="expression as myExpr">
...
</ANY>
$routeProvider
.when('/my-url', {
controller: 'MyController',
controllerAs: 'ctrl'
});
$stateProvider
.state('myState', {
controller: 'MyController',
controllerAs: 'ctrl'
})
那么, 使用了 controllerAs
有什么区别呢? 在 AngularJS 的文档中是这样说的:
- one binds methods and properties directly onto the controller using this: ng-controller=”SettingsController1 as settings”
- one injects $scope into the controller: ng-controller=”SettingsController2”
上面的意思是说, 就是使用 controllerAs
将直接绑定 Controller
的属性和方法, 而不使用 controllerAs
将绑定到为 Controller
注入的 $scope
参数, 下面用一个具体的例子来说明一下:
不使用 controllerAs
指令时, 通常我们这样做:
angular
.module('app', []).
controller('TestController', TestController);
TestController.$inject = ['$scope', '$window'];
function TestController($scope, $window) {
$scope.name = 'beginor';
$scope.greet = greet;
function greet() {
$window.alert('Hello, ' + $scope.name);
}
}
<div ng-Controller="TestController">
<label>Name:
<input type="text" ng-model="name" />
</label>
<button type="button" ng-click="greet()">
</div>
在 HTML 视图中, 我们绑定的是 $scope
对象的属性和方法, 而不是 TestController
的实例。
上面的例子在使用 controllerAs
时, 可以修改成这样:
angular
.module('app', []).
controller('TestController', TestController);
TestController.$inject = ['$window'];
function TestController($window) {
this.name = 'beginor';
this.$window = $window;
}
TestController.prototype.greet = function () {
this.$window.alert('Hello, ' + this.name);
}
<div ng-Controller="TestController as vm">
<label>Name:
<input type="text" ng-model="vm.name" />
</label>
<button type="button" ng-click="vm.greet()">
</div>
看到区别了吧, 使用 controllerAs
时, 可以将 Controller 定义成 Javascript 的原型类, 在 HTML 视图中直接绑定原型类的属性和方法。
这样做的优点是:
- 可以使用 Javascript 的原型类, 我们可以使用更加高级的 ES6 或者 TypeScript 来编写 Controller ;
- 避开了所谓的 child scope 原型继承带来的一些问题, 具体可以参考这里
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Springboot笔记~filter
- 【Kubernetes】10分钟部署一套K8S集群(kubeadm)
- 【Kubernetes】给K8S部署一套UI界面
- Flutter图片添加水印功能,Flutter保存Widget为图片
- Qt音视频开发3-vlc录像存储
- 被我用烂的DEBUG调试技巧,专治各种搜索不到的问题!
- 如何用R绘制双y轴柱状图
- CyclicBarrier类在性能测试中应用
- 这些年,我写过的BUG(二)
- python中的print与sys.stdout
- 特皮技术团队:一年经验菜鸟前端眼中的异步编程
- Phoenix的使用
- python迭代器与解析
- python中的三元运算符
- python 一行代码测量脚本的运行时间