Question

以下是使用范围继承的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Controller inheritance</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script type="text/javascript">
            var sample = angular.module("sample", []);

            function ParentController(){
                this.Name = "Jag";
            }

            sample.controller("emp", ParentController);

            function ChildController(){
                this.Sal = 3500;
                this.Dept = "Sales";
            }

            sample.controller("empDetails", ChildController);
        </script>
    </head>s
    <body ng-app="sample">
        <div ng-controller="emp as o1">
            Employee details of <strong>{{o1.Name}}</strong>:
            <div ng-controller="empDetails as o2">
                <strong>{{o1.Name}}</strong> earns {{o2.Sal}} and works in {{o2.Dept}} department.
            </div>  
        </div>

    </body>
</html>

其中控制器实例o2的嵌套范围必须将Name称为o1.Name。

以下是控制器继承的代码，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Scope inheritance</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script type="text/javascript">
            var sample = angular.module("sample", []);

            function ParentController(){
                this.Name = "Jag";
            }
            sample.controller("emp", ParentController);

            function ChildController(){
                ParentController.call(this);
                this.Sal = 3500;
                this.Dept = "Sales";
            }
            ChildController.prototype = Object.create(ParentController.prototype);
            sample.controller("empDetails", ChildController);
        </script>
    </head>
    <body ng-app="sample">
        <div ng-controller="emp as o1">
            Employee details of <strong>{{o1.Name}}</strong>:
        </div>
        <div ng-controller="empDetails as o2">
                <strong>{{o2.Name}}</strong> earns {{o2.Sal}} and works in {{o2.Dept}} department.
        </div>

    </body>
</html>

o2的范围未嵌套。

要设计继承层次结构，AngularJS推荐哪种方法？

注意：术语控制器继承不是标准术语。

Answer 1

我不知道AngularJS推荐什么，但这是我的想法。

首先，我以前从未考虑过控制器继承。但是现在我已经看到了它，我可以一眼看到一些潜在的滋扰。

在这种情况下ChildController没有依赖关系，所以事情很好。但考虑到以后您需要为其添加某种依赖项（服务），您必须记住在ParentController中请求该服务，然后手动将其传递给ChildController。如果你问我，这是一个很大的烦恼。
如果我们看一下html，第一种方式（正常范围继承）很明显ParentController确实需要{{1}}。第二种情况让事情变得更难看，如果我查看html，我发现两个控制器之间没有任何关系。

所以对我来说，范围继承（实际上是默认的处理方式）会以各种方式击败控制器继承。

我相信AngularJS团队本身并没有考虑过控制器的继承（但不能帮助我），所以最好坚持可验证的做事方式。

Answer 2

这不是答案哪种方法更好。我认为，如果你想在两个控制器之间共享一些逻辑或数据，你应该使用一个服务。他们的意图是 Singletons ，你可以注入多个控制器。

你会看到许多答案向你展示如何进行控制器继承，但是，使用它只会给你带来很大的麻烦（个人意见，并已经由mrahall说明）。为什么不使用AngularJS为您提供的非常好的机制，让您的控制器皮肤优雅？

只是为了展示一个例子：

https://jsfiddle.net/relferreira/2b5amcya/

<强> JS：

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['UserService'];

function mainController(UserService){

    var vm = this;
    vm.name = UserService.getName();

}

angular.module('app')
    .controller('DetailController', detailController);

detailController.$inject = ['UserService'];

function detailController(UserService){

    var vm = this;
    vm.name = UserService.getName();
    vm.other = 'test';

}

angular.module('app')
    .factory('UserService', userService);

function userService(){
    var name = 'Renan'; 
  return{
    getName: getName
  }

  function getName(){
    return name;
  }
}

<强> HTML：

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    {{mainVm.name}}
  </div>

  <div data-ng-controller="DetailController as detailVm">
    {{detailVm.name}}
    {{detailVm.other}}
  </div>

</div>

Angularjs - Controller继承Vs Scope继承

2 个答案: