您好我正在学习的角度也失去了我的脑海理解之间'变种' 的区别,'这个'和'$范围'。
虽然我读了这个link但它超出了我的头。
当我使用ng-controller="myController as ctrl"
时,我只能访问这个上设置的变量和函数。
虽然定义ng-controller="myController"
我只能访问$ scope上设置的变量和函数。
有人可以深入解释这个话题吗?
回答
关键字var
是纯粹的JavaScript,只是你如何在javascript中声明变量。像这样:
var myName = 'Nikolaj';
var myAge = 1700;
// etc.
如果你不熟悉var
你应该冒险进入前角学习JavaScript,因为角度的学习曲线,可以说是相当陡峭的开始。
这样说我会试着解释其他的概念。
使用controllerAs
当使用推荐controllerAs语法,你在你的模板控制器实例的引用。这是使用<div ng-controller="myController as ctrl"></div>
时会发生的情况;
您的控制器基本上是“新的”,并存储在一个名为ctrl
的变量中,该变量通过角度在模板中可用。这允许您访问控制器成员(公共函数和变量)的模板是这样的:
<div ng-controller="myController as ctrl">
<p>{{ctrl.name}}</p>
</div>
为了使变量name
在模板可用,首先必须声明为public成员/你的控制器的变量。这正是this
关键字发挥作用的地方。当你创建你的控制器,使变量name
公众,你会做这样的:
angular.module('app').controller('myController', function(){
this.name = 'My name variable';
});
这里this
是在Javascript中一个特殊的概念,那就是函数上下文的引用 - 但只是基本的JavaScript。
使用$范围
当你改用您的控制器是这样的:<div ng-controller="myController"></div>
你没有在你的模板直接访问控制器实例。相反,每次在角度表达式中使用某些东西时,例如{{name}}
,Angular隐含地假定变量name
存在于$ scope变量上。链接到模板时,每个控制器都有一个$ scope变量。要访问您的控制器体内这个变量,你会喜欢这个访问:
angular.module('app').controller('myController', function($scope){
$scope.name = 'My name variable';
});
之所以controllerAs建议语法,因为使用$范围时,在某种程度上,它可以当你有多个嵌套的作用域(即嵌套控制器)时,很难确定你指的是哪个作用域。如本例:
<div ng-controller="FirstController">
<h1>{{firstControllerVariable}}</h1>
<div ng-controller="SecondController">
<h2>{{whereDoIBelong}}</h2>
</div>
</div>
随着controllerAs语法,这是很清楚哪些变量属于哪个控制器:
<div ng-controller="FirstController as first">
<h1>{{first.firstControllerVariable}}</h1>
<div ng-controller="SecondController as second">
<h2>{{second.iKnowWhereIBelong}}</h2>
</div>
</div>
另一个原因是使用controllerAs语法是因为它会更容易迁移到ES2016及以上。
因此,如果我没有错,使用** controllerAs **语法允许我们引入一个绑定到我们控制器的新命名空间,而不需要将范围属性放入额外的对象字面值中? – CoderX
它并不像绑定到控制器那样多的新命名空间,因为它是对控制器实例本身的引用。你可以想象它的工作原理是这样的:'var ctrl = new myController()'在幕后。 –
- 1. AngularJS分离范围:VS =
- 2. $范围变量VS ngTable文档中VAR
- 3. isset($ var)vs @ $ var
- 4. Perl%{$ var} vs%$ var
- 5. Angularjs $范围和此功能
- 6. [[-n $ VAR] VS [[-n $ {VAR: - }]
- 7. Mule ASYNC范围vs VM
- 8. 角指令:范围VS bindToController
- 9. JavaScript本地范围:var与此对比
- 10. 范围vs ctags在功能方面
- 11. AngularJs 1.x中的指令:隔离范围vs要求ngModel
- 12. VAR VS对象在C#
- 13. var vs * var的gdb/x命令var
- 14. $ injector.instantiate VS $ injector.get VS $ injector.invoke in angularjs
- 15. 在AngularJs范围
- 16. AngularJS $ http vs $ http.post
- 17. NPM包本地VS全球范围
- 18. $状态VS在AngularJS
- 19. Symfony 1.4 vs Symfony 2.0混淆
- 20. Java序列化1.4 vs 1.6
- 21. 会话范围的托管bean vs有状态的bean vs httpsession
- 22. 范围angularjs
- 23. 春季的线程范围vs请求范围
- 24. 红宝石 - 词法范围VS继承
- 25. AngularFire VS $ bindTo结合范围是什么?
- 26. 检索X行,TOP VS范围
- 27. ActiveRecord Rails 3范围vs类方法
- 28. Java int的VS整数 - 不同范围
- 29. Arrow语法VS ES5函数范围
- 30. 使用angularjs $超时与“此”insted $范围
['this'vs $ scope in AngularJS controllers](https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) – Vivz