Question

有两种模式用于访问控制器功能：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模式更容易上手，更自然。

建议吗？

Answer 1

两者都有它们的用途。 首先，一些历史......

$ scope是“经典”技术，而“控制器为”更新近（从版本1.2.0开始，虽然它确实出现在此之前的不稳定的预发行版中）。

两者都运行得很好，唯一错误的答案是在没有明确原因的情况下将它们混合在同一个应用程序中。坦率地说，混合它们会起作用，但它只会增加混乱。所以选择一个并滚动它。最重要的是要保持一致。

哪一个？这取决于你。还有更多的范围有$ scope，但“控制器为”也在增加。这个比那个好吗？这是值得商榷的。那你怎么选择？

<强>舒适

我更喜欢“控制器为”，因为我喜欢隐藏$ scope并通过中间对象将控制器中的成员暴露给视图。通过设置此。*，我可以将我想要从控制器公开的内容暴露给视图。您也可以使用$ scope执行此操作，我更喜欢使用标准JavaScript。事实上，我这样编码：

var vm = this;

vm.title = 'some title';
vm.saveData = function(){ ... } ;

return vm;

这对我来说感觉更干净，并且可以很容易地看到暴露在视图中的内容。注意我将变量命名为“vm”，它代表viewmodel。那只是我的惯例。

使用$ scope我可以做同样的事情，所以我不会添加或减少该技术。

$scope.title = 'some title';
$scope.saveData = function() { ... };

所以由你来决定。

<强>注塑

使用$ scope我需要将$ scope注入控制器。我没有必要用控制器这样做，除非我出于其他原因需要它（比如$ broadcast或者手表，尽管我试图避开控制器中的手表）。

<强>更新我写了这篇关于2个选择的帖子： http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

Answer 2

Angular 2.0中删除了

$scope。因此，随着Angular 2.0的发布日期越来越近，使用this将成为其他人想要遵循的方法。

Answer 3

我的观点是，javascript中的'this'在它自身有足够的问题，并且为它添加另一个意义/用途并不是一个好主意。

为了清楚起见，我会使用$ scope。

<强>更新

现在有'控制器为'语法，讨论here。我不是粉丝，但现在它是一个更“官方”的AngularJS构造，值得一些关注。

Answer 4

我认为Controller As更好，因为它允许更容易嵌套范围，如Todd Motto所述：

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

此外，它将确保您始终至少有一个。在您的绑定表达式中，这会强制您遵循don't bind to primitives推荐。

另外，你可以从2.0中消失的范围中解脱出来。

Answer 5

Angular文档明确告诉您建议使用.thumb > li a { border-width: 1px; border-style: solid; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-color: #E5E6E9 #DFE0E4 #D0D1D5; display: block; margin: 2px; position: relative; transition: all 0.3s ease 0s; } .thumb > li a:hover { border-color: #00C0FF; box-shadow: 0px 0px 7px #00C0FF; text-decoration: none; outline: medium none; transition: all 0.3s ease 0s; transform: scale(1.1); }。除了this被移除的事实之外，这是我永远不会使用$scope的充分理由。

Answer 6

jason328＆＃34; $范围正在Angular 2.0中删除＆＃34;对我来说听起来不错。我找到了另一个帮助我做出选择的理由：this更强可读 - 当我在HTML中看到fooCtrl.bar时，我立即知道在哪里找到{的定义{1}}。

更新：在切换到bar解决方案后不久，我开始错过this方式，需要更少的输入

Answer 7

两者都有效，但如果您将适用于范围的内容应用于$ scope，并且如果将适用于控制器的内容应用于控制器，则代码将易于维护。对于那些说“呃只是使用范围而忘记这个控制器作为语法”的人......它可能会起作用但我想知道如何在不丢失事物的情况下维护一个巨大的应用程序。

Answer 8

我更喜欢组合。

一个简单的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';

**不建议使用带有$$的属性和方法让Angular团队搞砸，但是对于使用$ parent和$ id做的很酷的东西，$可以是安全的游戏。

'this'直截了当，附加双向数据和函数。你只能看到你附上的东西：

foo: 'bar';

那为什么我更喜欢组合？

在ui-router嵌套应用程序中，我可以访问主控制器，在子控制器中设置和调用通用值和函数：

在主控制器中：

// 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;

现在，您可以从父母的孩子和孩子中访问父母！

我应该使用`this`还是`$ scope`？

8 个答案:

我更喜欢组合。

那为什么我更喜欢组合？