Question

关于这个问题，我有一个pretty big question，但我认为将它拆分为较小的问题可能很容易。

所以，我试图使用$ controller来继承ParentController，但事情没有按预期工作。

我有一个jsfiddle here。这就是代码。

angular
    .module("app",[])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)

    ParentController.$inject = ['$scope']
    ChildController.$inject = ['$controller', '$scope'];

function ParentController($scope) {
    var vm = this;    

    vm.foo = 'parent foo';
}

function ChildController($controller, $scope) {

    $controller('ParentController as vm', {$scope: $scope});

        var vm = $scope.vm; // view model       
}

一个简单的html

<div>
  {{vm.foo}}
</div>

当我配置应用程序以使用ParentController时，使用此

<body ng-app="app" ng-controller="ParentController as vm">

它工作正常。

但是现在，使用ChildController不起作用，它就像vm不包含在ParentController中创建的属性foo。

我做错了什么？

非常感谢。

Answer 1

如果你真的想采用这种方法，那么你需要使用基本父控制器扩展子控制器。您可以使用angular.extend：

function ChildController($controller, $scope) {
    angular.extend(this, $controller('ParentController', {$scope: $scope}));
    this.bar = 'child bar';
}

确保首先使用父控制器实例扩展子控制器实例对象（this），然后才定义新的子属性。

演示：http://plnkr.co/edit/mdyCOUdZSLUV06AMnoZG?p=preview

Answer 2

HTML 的

<div>
  {{vm.foo}}
</div>

控制器

  angular
    .module("app",[])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)

    ParentController.$inject = ['$scope']
    ChildController.$inject = ['$controller', '$scope'];

function ParentController($scope) {
    var vm = this;
    vm.obj={};
    vm.obj.foo = 'parent foo';
    console.log('parent',vm.obj);
}

function ChildController($controller, $scope) {

  $controller('ParentController as vm', {$scope: $scope});

    var vm = vm; // view model      
    console.log("child",$scope.vm.obj);
}

Controller作为$ controller的继承

2 个答案: