我应该使用`this`还是`$ scope`?
有两种模式用于访问控制器function: this
和$scope
。
我应该使用什么和什么时候? 我知道this
是设置为控制器和$scope
是一个对象在范围链视图。 但是用新的“Controller as Var”语法,你可以很容易地使用。 所以我问的是什么是最好的,未来的方向是什么?
例:
-
使用
this
function UserCtrl() { this.bye = function() { alert('....'); }; }
<body ng-controller='UserCtrl as uCtrl'> <button ng-click='uCtrl.bye()'>bye</button>
-
使用
$scope
function UserCtrl($scope) { $scope.bye = function () { alert('....'); }; }
<body ng-controller='UserCtrl'> <button ng-click='bye()'>bye</button>
我个人发现this.name
比其他的Javascript OO模式更容易在眼睛上,更自然。
请教?
两者都有其用途。 首先,一些历史…
$范围是“经典”技术,而“控制器为”是更近的(从版本1.2.0正式,虽然它确实出现在此之前不稳定的预发行版)。
两者都工作得很好,唯一错误的答案是在没有明确理由的情况下将它们混合在同一个应用程序中。 坦率地说,混合它们将起作用,但这只会增加混乱。 所以select一个和它一起滚动。 最重要的是保持一致。
哪一个? 这取决于你。 $ scope的例子还有很多,但是“controller as”也在增加。 这个比那个好吗? 这是有争议的。 那么你如何select?
安慰
我更喜欢“控制器为”,因为我喜欢隐藏$范围,并通过中介对象暴露从控制器的成员视图。 通过设置这个*,我可以暴露我想从控制器暴露的视图。 你也可以用$ scope做到这一点,我只是喜欢使用标准的JavaScript。 实际上,我是这样编码的:
var vm = this; vm.title = 'some title'; vm.saveData = function(){ ... } ; return vm;
这让我感觉更清洁,并且可以很容易地看到暴露在视图中的东西。 注意我命名了我返回的variables“vm”,它代表viewmodel。 这只是我的惯例。
用$范围我可以做同样的事情,所以我不增加或减less技术。
$scope.title = 'some title'; $scope.saveData = function() { ... };
所以它取决于你在那里。
注射
$ scope我需要注入$ scope到控制器。 我不需要这样做,除非我需要它作为其他原因(如$广播或手表,但我尽量避免手表在控制器中)。
更新我写了这个职位关于2个select: http : //www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/
$scope
在Angular 2.0中被删除。 因此,当Angular 2.0的发布date接近之后,使用this
将是其他人想要遵循的方法。
我的意见是,这个在javascript中有足够的问题,并增加了另一个意义/使用它不是一个好主意。
为了清楚起见,我会使用$ scope。
UPDATE
现在有'控制器'语法,在这里讨论。 我不是一个粉丝,但现在它是一个更“官方”的AngularJS构造,值得注意。
我认为Controller As更好,因为它允许更容易嵌套的范围如Todd Motto所描述的那样:
http://toddmotto.com/digging-into-angulars-controller-as-syntax/
此外,它将确保您始终至less有一个。 在你的绑定expression式迫使你遵循不要绑定到原语 recomendation。
另外,你可以从2.0的范围内解脱出来。
使用“this”似乎是Google I / O 2013的新增function
http://m.youtube.com/watch?v=HCR7i5F5L8c
另外,请检查这个答案: AngularJS控制器中的“this”与$ scope
Angular文档明确告诉你,build议使用this
。 那除了$scope
被移除的事实之外,还有足够的理由让我永远不会使用$scope
。
jason328的“$范围正在被删除在Angular 2.0”听起来是一个很好的理由给我。 我发现另一个理由来帮助我做出select: this
更可读 – 当我看到HTML中的fooCtrl.bar
时,我立即知道在哪里findbar
的定义。
更新:切换到this
解决scheme后不久,我开始错过$scope
方法,需要更less的打字
两者都可以工作,但是如果将适用于范围的内容应用于$ scope,并且如果将适合控制器的内容应用于控制器,则代码将易于维护。 对于那些说“只是使用范围,忘记这个控制器作为语法”的人……它可能会一样,但我不知道如何能够保持一个巨大的应用程序,而不会失去事情跟踪。
我更喜欢组合。
一个简单的console.log的$ scope和'this'在填充了一些模拟数据之后会显示出来。
$ scope允许访问控制器的下面部分,例如:
$$ChildScope: null; $$childHead: null; $$childTail: null; $$listenerCount: Object; $$listeners: Object; $$nextSibling: Scope; $$prevSibling: null; $$watchers: null; $$watcherCount: 0; $id: 2; $parent: Object; foo: 'bar';
**不build议使用$$的属性和方法来搅乱Angular团队,但$可以成为使用$ parent和$ id做很酷的东西的安全游戏。
“这个”就直接指向了这一点,附加了双向数据和function。 你只会看到你所附的:
foo: 'bar';
那么为什么我更喜欢组合?
在UI路由器嵌套的应用程序中,我可以访问主控制器,在子控制器中设置和调用通用值和函数:
在主控制器中:
// Main Controller var mainCtrl = this; mainCtrl.foo = 'Parent at the bar';
在子控制器中:
// Child Controller var mainCtrl = $scope.$parent.mainCtrl; var childCtrl = this; // update the parent from within the child childCtrl.underageDrinking = function(){ mainCtrl.foo = 'Child at the bar'; } // And then attach the child back to a property on the parent controller! mainCtrl.currentCtrl = childCtrl;
现在,您可以从父母的孩子和孩子内部访问父母!