AngularJS – 为什么使用“Controller as vm”？

发布时间：2020-12-17 08:09:57 所属栏目：安全来源：网络整理

导读：这个整个周末，我很苦恼，不明白为什么父母控制器的功能没有被子控制器识别。我很快意识到把我的控制器作为vm是原因： div data-ng-controller="ParentCtrl as vm" div data-ng-controller="Child1 as vm"/div div data-ng-controller="Child2 as vm"/div /

这个整个周末，我很苦恼，不明白为什么父母控制器的功能没有被子控制器识别。

我很快意识到把我的控制器作为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或其他服务)的场景，您仍然可以轻松地将它们传递给构造函数，但是这种模式可以直接在您的$范围内减少混乱，并且还可以解决当直接设置变量时变量隐藏的问题在范围上。

最终它真的归结于一个偏好的问题，但对我而言，我真的很希望不必直接在范围上定义所有内容，并尽可能地将我的控制器视为任何旧的JavaScript对象。

以下是关于控制器使用情况的优秀文章：
http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!