我应该使用' this '还是' $scope ' ?

有两种模式用于访问控制器函数:this和$scope。

我应该什么时候用哪种?我知道this被设置为控制器，而$scope是视图作用域链中的对象。但是有了新的“Controller as Var”语法，你可以很容易地使用其中任何一种。所以我的问题是什么是最好的，未来的方向是什么?

例子:

  1. 使用this < p >

    function UserCtrl() {
this.bye = function() { alert('....'); };
}

    <body ng-controller='UserCtrl as uCtrl'>
<button ng-click='uCtrl.bye()'>bye</button>

  2. Using $scope

    function UserCtrl($scope) {
$scope.bye = function () { alert('....'); };
}

    <body ng-controller='UserCtrl'>
<button ng-click='bye()'>bye</button>

I personally find the this.name to be easier on the eye and more natural compared to other Javascript OO patterns.

Advice please?

78819 次浏览
小开

我的观点是，javascript中的“this”本身就有足够的问题，为它添加另一个含义/用法不是一个好主意。

为了清晰起见，我将使用$scope。

更新

现在有了“controller as”语法，讨论了在这里。我不是它的粉丝，但现在它是一个更“正式”的AngularJS结构，它值得关注。

小开

两者都有各自的用途。首先，一些历史……

$scope是“经典”技术，而“controller as”则是最近才出现的技术(官方版本为1.2.0，尽管在此之前它确实出现在不稳定的预发布版中)。

两者都运行得非常好，唯一的错误答案是在没有明确理由的情况下将它们混合在同一个应用程序中。坦率地说，把它们混在一起是可行的，但只会增加混乱。那就选一个吧。最重要的是始终如一。

哪一个?这取决于你。还有很多关于$scope的例子，但是“controller as”也越来越流行。一个比另一个好吗?这是有争议的。那么该如何选择呢?

安慰

我更喜欢“controller as”，因为我喜欢隐藏$作用域，并通过中间对象将控制器的成员暴露给视图。通过设置这个。*，我可以从控制器向视图公开我想要公开的内容。你也可以用$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注入到控制器中。我不必在控制器as中这样做，除非我出于其他原因需要它(如$broadcast或watches，尽管我尽量避免在控制器中使用手表)。

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

小开

两者都可以工作，但是如果你将适用于范围的东西应用到$scope，如果你将适用于控制器的东西应用到控制器，你的代码将很容易维护。对于那些说“呃，只使用范围，忘记这个控制器作为语法”的人……它的工作原理可能是一样的，但我想知道如何能够在不丢失内容的情况下维护一个巨大的应用程序。

小开

$scope在Angular 2.0中被移除。因此，随着Angular 2.0发布日期的临近，使用this将是其他人想要效仿的方法。

小开

我认为控制器As更好，因为它允许更容易地嵌套作用域，如Todd Motto所述:

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

而且，它将确保你总是至少有一个。在绑定表达式中强制遵循不要绑定到基本类型建议。

另外，你还可以与作用域解耦，这在2.0中将会消失。

小开

jason328的“$scope将在Angular 2.0中被移除”对我来说听起来是个很好的理由。我发现了另一个帮助我做出选择的原因:this更像是可读的——当我在HTML中看到fooCtrl.bar时，我立即知道在哪里可以找到bar的定义。

更新:在切换到this解决方案后不久，我开始怀念需要更少输入的$scope方式

小开

Angular文档明确地告诉你，建议使用this。那，除了事实，$scope被删除是足够的理由，我永远不会使用$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';

** Angular团队不建议使用$$的属性和方法，但是$可以安全地使用$parent和$id来做一些很酷的事情。

“this”直奔主题，附加2向绑定的数据和函数。你只会看到你附上的东西:

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;

现在，您可以从子对象中访问父对象，从父对象中访问子对象!


提交答案