首页 文章

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

提问于
浏览
248

有两种模式用于访问控制器功能: 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模式更容易上眼,更自然 .

建议好吗?

8 回答

  • 227

    两者都有它们的用途 . First, some history ...

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

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

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

    Comfort

    我更喜欢“控制器为”,因为我喜欢隐藏$ 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() { ... };
    

    所以它取决于你 .

    Injection

    使用$ scope我需要将$ scope注入控制器 . 我没有必要用控制器这样做,除非我出于其他原因需要它(如$ broadcast或watch,尽管我试图避开控制器中的 Watch ) .

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

  • 67

    在Angular 2.0中删除了 $scope . 因此,使用 this 将是其他人想要遵循的方法,因为Angular 2.0的发布日期越来越近 .

  • 1

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

    为了清晰起见,我会使用$ scope .

    UPDATE

    现在有'controller as'语法,讨论了here . 我不是粉丝,但现在官方的'AngularJS构建它值得一些关注 .

  • 4

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

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

    此外,它将确保您始终至少有一个 . 在您的绑定表达式中强制您遵循don't bind to primitives recomendation .

    另外,您可以从2.0中消失的范围中分离出来 .

  • 40

    Angular文档明确告诉您建议使用 this . 除了 $scope 被删除的事实之外,这是我永远不会使用 $scope 的充分理由 .

  • 6

    jason328的"$scope is being removed in Angular 2.0"对我来说听起来不错 . 我发现了另一个帮助我做出选择的理由: this 更多 readable - 当我在HTML中看到 fooCtrl.bar 时,我立即知道在哪里可以找到 bar 的定义 .

    更新:切换到 this 解决方案后不久,我开始想念 $scope 方式需要更少打字

  • 1

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

  • 10

    我更喜欢组合 .

    一个简单的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团队,但$ can可以安全地玩$ 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;
    

    现在,您可以从父母的孩子和孩子中访问父母!

相关问题