Question

好，我有一个主控制器，还有一个我在其中扩展主控制器（以显示不同的布局）。

主控制器：

function CustomerInformationController(...) {
    var vm = this;
    ...

    vm.save = function() {
        if (angular.isDefined(vm.guestAccountForm)) {
            ...
        }
        ...

主模板：

<div ng-controller="CustomerInformationController as customerInformation" class="customer-information">
    <form name="customerInformation.guestAccountForm">
    ...
    </form>
</div>

扩展控制器：

function CustomerInformationControllerExtent($controller, $scope) {
    var vm = this;

    // Extend Product Controller.
    angular.extend(this, $controller('CustomerInformationController', { $scope: $scope }));

扩展模板（我希望能够重新设计该模板并覆盖它）：

<div ng-controller="CustomerInformationControllerExtent as customerInformation" class="customer-information">
    <form name="customerInformation.guestAccountForm">
    ...
    </form>
</div>

当我仅使用主控件时，一切都很好，但是在控制器扩展中，当我尝试检查表单是否有效时，vm.guestAccountForm未定义。

但是，当我尝试使用this（this.guestAccountForm）时就可以了。

我缺少带有扩展功能的东西吗？

Answer 1

一种方法是将vm对象作为局部对象注入：

function CustomerInformationControllerExtent($controller, $scope) {
    var vm = this;

    // Extend Product Controller.
    angular.extend(this, $controller('CustomerInformationController', { vm  vm}));

然后使用注入的vm对象：

function CustomerInformationController(vm) {
    ̶v̶a̶r̶ ̶v̶m̶ ̶=̶ ̶t̶h̶i̶s̶;̶
    ...

    vm.save = function() {
        if (angular.isDefined(vm.guestAccountForm)) {
            ...
        }
        ...

this的{{1}}对象与xController控制器的this对象不同。这就是使用xControllerExtent的原因。它将属性从一个angular.extend对象复制到另一个。

坦率地说，我认为这不是最明智的方法。如果要在控制器之间共享常用功能，请将这些常用功能放入服务中。

提交时扩展控制器的形式不确定

1 个答案: