AngularJS-为什么使用"Controller as vm"? [英] AngularJS - Why use "Controller as vm"?

问题描述

整个周末，我感到非常苦恼，无法理解为什么子控制器无法识别父控制器的功能.

我很快意识到让我的控制器成为虚拟机的原因是

 <div data-ng-controller="ParentCtrl as vm">
   <div data-ng-controller="Child1 as vm"></div>
   <div data-ng-controller="Child2 as vm"></div>
 </div>

当然，现在看来child1和2都不会看到ParentCtrl中的函数，而且如果我改为使用先前的不带vm的工作模式，而是使用$ scope，一切都会很好.

所以我的问题是使用"vm"方法对任何人有什么好处?如果它优于不使用它，那么如何在不发出代码的情况下在ParentCtrl中调用一个调用函数呢?

谢谢

解决方案

使用控制器作为语法的一个优点是，它允许您将控制器定义为具有属性和直接从实例化对象公开的简单javascript构造函数.而不是$ scope.

例如:

function MyController() {

    var ctl = this;

    ctl.message = 'You have not clicked anything yet.';

    ctl.onClick = function() {
        ctl.message = 'You clicked something.';
    };

    return ctl;
}

...

myModule.controller('MyController', MyController);

...

<div ng-controller="MyController as vm">
    <span>{{vm.message}}</span>
    <button ng-click="vm.onClick()">Click Me</button>
</div>

请注意，我们可以使用普通的旧javascript控制器，而无需绑定角度.对于需要其他依赖项(例如$ scope或其他服务)的方案，您仍然可以轻松地将它们传递给构造函数，但是这种模式可以直接在$ scope上减少混乱，还可以解决直接设置变量时变量隐藏的问题在范围上.

最终，这实际上归根结底是一个优先事项，但是对我来说，我真的很喜欢不必直接在范围内定义所有内容，也不必将控制器尽可能地视为任何旧的javascript对象.

关于控制器的用法，这里有一篇很棒的文章: http://www.johnpapa.net/angularjss-controller-as-and-the -vm-variable/

This entire weekend, I was in much distress, not understanding why a parent controller's function was not being recognized by a child controller.

I soon realized that having my controller as vm was the cause:

 <div data-ng-controller="ParentCtrl as vm">
   <div data-ng-controller="Child1 as vm"></div>
   <div data-ng-controller="Child2 as vm"></div>
 </div>

Sure, it all seems obvious now that neither child1 nor 2 will see functions in ParentCtrl, and if instead I had used the prior pattern of working without vm, and instead had $scope, all would be well.

So my question is "What does it benefit anyone for using the "vm" method, and if it is superior to not using it, how can one call function calls in the ParentCtrl short of emit?

Thank You

解决方案

One advantage of using the controller as syntax is that it allows you to define your controllers as a simple javascript constructor function with properties and functions exposed directly from the instantiated object rather than the $scope.

For example:

function MyController() {

    var ctl = this;

    ctl.message = 'You have not clicked anything yet.';

    ctl.onClick = function() {
        ctl.message = 'You clicked something.';
    };

    return ctl;
}

...

myModule.controller('MyController', MyController);

...

<div ng-controller="MyController as vm">
    <span>{{vm.message}}</span>
    <button ng-click="vm.onClick()">Click Me</button>
</div>

Notice that we are able to use a controller that is plain old javascript without even being tied to angular. For scenarios where you need additional dependencies such as $scope or other services, you can still easily pass them in to your constructor, but this pattern encourages less clutter directly on your $scope and also solves the problem of variable hiding when variables are set directly on the scope.

Ultimately it really comes down to a matter of preference, but for me I really like not having to define everything directly on the scope and to treat my controllers as any old javascript object as much as possible.

Here's an excellent article on the usage of controller as: http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

这篇关于AngularJS-为什么使用"Controller as vm"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！