Question

我正在尝试在angularjs中设置一些嵌套视图。我一直在使用ui-router库来完成这项工作，这在大多数情况下都很有用。问题是每个视图都有一个单独的控制器，它们之间没有真正的继承。如果我想从子控制器修改父控制器中的某些东西，我必须使用$ scope。$ parent。这有点痛苦，如果有多个级别的继承并且您必须记住您正在访问的变量所在的级别，则可能会变得更糟。此外，如果你忘记了使用$家长在孩子的控制器和您尝试修改家长的变量之一，角将创建变量的新实例，这可能导致一些难以追踪bug。

理想情况下，我只能使用原型继承。这也可以很好地映射到Typescript或Coffeescript中的类。我想要做到这一点的一种方法是摆脱所有的父控制器，只是让子控制器继承原型（超类）的任何常见功能。然后你只需要将控制器放在$ rootScope上，以便父视图可以访问它。

有人能想到这个解决方案或更好解决方案的任何问题吗？我会更好地使用$ parent并让Angular handel成为“继承”。

由于

Answer 1

如果稍微修改源，您应该能够启用原型继承。

打开文件./ui-router/src/viewDirective.js，您应该会在顶部附近找到它：

var directive = {
    restrict: 'ECA',
    terminal: true,
    transclude: true,
    ...

添加另一行，使其显示为：

var directive = {
    restrict: 'ECA',
    terminal: true,
    transclude: true,
    scope: true,
    ...

这应该启用继承。我找不到一个好的直接来源，但是this you tube playlist充满了各种各样的角度善良。

Answer 2

正如约翰所指出的那样，$ scope对象继承了彼此，但实际的控制器却没有。所以我决定进行设置，以便控制器相互继承。为此，我有一个根控制器，看起来像这样：

function rootCtrl($scope) {
    $scope.ctrl={};
    $scope.ctrl.scope = $scope;
}

然后在我最深层嵌套的子控制器中，我有类似的东西

function myCtrl($scope, $dependency1, $dependency2) {
    myCtrlImpl.apply($scope.ctrl, [$http, $dependency1, $dependency2]);
}

function myCtrlImpl($dependency1, $dependency2) {
    this.someVariableThatIsAccessableEverywhere = ":)";

    //If I want to access scope from here I can just do something like
    //this.scope.$watch...
}

现在，如果我想将myCtrlImpl中的任何功能移动到基础原型中，我可以使用标准的原型继承。

AngularJS中的继承和嵌套视图

2 个答案: