Question

我有一个应用程序，其中每个＆＃34;组件＆＃34;有两种视图：移动视图和桌面视图。这些视图都很相似，它们应该从同一个地方继承大量代码以保持DRY，但是它们应该各自拥有自己的控制器。

为了解决这个问题，我有这个设置：

浏览

基本模板，＆＃34; main.html＆＃34;使用ng-include显示＆＃34; mainMobile.html＆＃34;或＆＃34; mainDesktop.html＆＃34;
＆＃34; mainMobile.html＆＃34;对于移动视图，使用ng-controller指定移动控制器
＆＃34; mainDesktop.html＆＃34;对于移动视图，使用ng-controller指定移动控制器

控制器

基本控制器（MainCtrl）
从base继承并添加特定于移动设备的功能的控制器（MainMobileCtrl）
从base继承并添加桌面特定功能的控制器（MainDesktopCtrl）

以MainMobileCtrl为例。它继承自MainCtrl，如：

angular.module('app').controller('MainMobileCtrl', function ($scope, $controller) {
    var vm = this;
    angular.extend(vm, $controller('MainCtrl', { $scope: $scope }));
});

这将引入MainCtrl初始构造函数调用中设置的所有属性。一切都运行得很好，直到我开始介绍异步代码。

当基本控制器（MainCtrl）在promise的解析中添加或更新属性时，这些更改不会被推送到子控制器（MainMobileCtrl）：

angular.module('app').controller('MainCtrl', function ($scope, someService) {
    var vm = this;

    vm.notExposed = '---';

    someService.doThings().then(function () {
        vm.notExposed = 'unfortunately';
    });
});

angular.module('app').controller('MainMobileCtrl', function ($scope, $controller) {
    var vm = this;
    angular.extend(vm, $controller('MainCtrl', { $scope: $scope }));

    // just to illustrate that at this point, the service promise is resolved
    setTimeout(function () {
        console.log(vm.notExposed); // shows "---"
    }, 5000);
});

从我所看到的，这只是因为属性被复制到MainMobileCtrl.vm一次，没有任何引用。我应该提一下，这似乎适用于$scope，因为它看起来像$ scope通过引用共享。但我希望避免以这种方式使用$scope，因为它会导致vm和$scope变量混淆不匹配。

有没有体面的方法来完成我想要做的事情？

Answer 1

如果要在控制器之间共享数据，最好将这些数据存储为某种服务，并将其注入应该使用它的控制器。此外，如果你真的需要在这里实现OOP扩展，也许你应该做it shown in this fiddle。

之类的事情

function extend(child, parent) {
    var F = function() { }
    F.prototype = parent.prototype;
    child.prototype = new F();
    child.prototype.constructor = child;
    child.superclass = parent.prototype;
}

function MainCtrl(){
   ...
}

extend(MainMblCtrl, MainCtrl);
function MainMblCtrl(){
   MainMblCtrl.superclass.constructor.apply(this, arguments);
   ...
}

其他你可以使用EcmaScript 6或TypeScript，它们具有类似普通类的扩展。

移动和桌面视图的角度控制器继承

1 个答案: