AngularJS中的继承和嵌套视图

Question

I'm trying to set up some nested views in angularjs. I've been using the ui-router library to do this which works great for the most part. The problem is that there is a separate controller for each view with no real inheritance going on between them. If I want to modify something in a parent controller from a child controller I have to use $scope.$parent . This is a bit of a pain and it can become worse if there are multiple levels of inheritance and you have to remember which level the variable you are accessing is on. Also if you forget to use $parent in your child controller and you try to modify one of the parent's variables, Angular will create a new instance of the variable which could lead to some hard to track down bugs.

Ideally I would just be able to use prototype inheritance. This would also map nicely into classes in Typescript or Coffeescript. One way I thought of to do this would be to get rid of all the parent controllers and just have the child controllers which would inherit any common functionality from prototypes (super classes). Then you would just have to throw the controller up on the $rootScope so that the parent views could access it.

Can anyone think of any issues with this solution or better solutions? Would I be better off just using $parent and letting Angular handel the "inheritance".

Thanks

Answer 1

You should be able to enable protypal inheritance if you modify the source slightly.

Open the file ./ui-router/src/viewDirective.js and you should find this near the top:

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

Add another line such that it reads:

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

This should enable inheritance. I can't find a good direct source on this, but this you tube playlist is full of all sorts of angular goodness.

Answer 2

As John pointed out the $scope objects inherit from each other but the actual controllers do not. So I decided to set it up so that the controllers do inherit from each other. To do this I have one root controller that just looks like this:

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

Then in my most deeply nested child controllers I have something like this

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...
}

Now if I want to move any functionality from myCtrlImpl into a base prototype, I can just use standard prototype inheritance.