AngularJS - 为什么使用“控制器作为虚拟机"? [英] AngularJS - Why use "Controller as vm"?

问题描述

整个周末，我都很苦恼，不明白为什么子控制器无法识别父控制器的功能.

我很快意识到将我的控制器作为 vm 是原因:

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

当然，现在似乎很明显，child1 和 2 都不会在 ParentCtrl 中看到函数，如果相反，我使用了先前没有 vm 的工作模式，而是使用 $scope，一切都会好起来的.

所以我的问题是使用vm"方法对任何人都有什么好处，如果它比不使用它更好，那么如何在 ParentCtrl 中调用函数调用而没有发出?

谢谢

解决方案

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

例如:

function MyController() {var ctl = 这个；ctl.message = '你还没有点击任何东西.';ctl.onClick = 函数(){ctl.message = '你点击了一些东西.';};返回ctl；}...myModule.controller('MyController', MyController);...<div ng-controller="MyController as vm"><span>{{vm.message}}</span><button ng-click="vm.onClick()">点击我</button>

请注意，我们可以使用纯老式 javascript 控制器，而无需绑定到 angular.对于需要额外依赖的场景，比如 $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 - 为什么使用“控制器作为虚拟机"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！