AngularJS中的继承和嵌套视图

Inheritance and nested views in AngularJS

本文关键字：嵌套 视图 继承 AngularJS      更新时间：2023-09-26

我正在尝试在angularjs中设置一些嵌套视图。我一直在使用ui路由器库来完成这项工作，这在大多数情况下都很有效。问题是，每个视图都有一个单独的控制器，它们之间没有真正的继承。如果我想从子控制器修改父控制器中的某些内容，我必须使用$scope$父母亲这有点痛苦，如果有多个继承级别，并且你必须记住你正在访问的变量在哪个级别，情况可能会变得更糟。此外，如果你忘记在子控制器中使用$parent，并且你试图修改父控制器的一个变量，Angular将创建该变量的新实例，这可能会导致一些难以跟踪的错误。

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

有人能想出这个解决方案或更好的解决方案的任何问题吗？如果我只使用$parent并让Angular处理"继承"，会更好吗。

感谢

如果稍微修改源代码，您应该能够启用protypal继承。

打开文件/ui router/src/viewDirective.js，你应该在顶部附近找到这个：

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

添加另一行，使其显示：

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

这将启用继承。我找不到一个好的直接来源，但这个你管播放列表充满了各种角度的优点。

正如John所指出的那样，$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转移到基本原型中，我可以使用标准原型继承。

相关文章：