AngularJS controller inheritance

Question

AngularJS has a DOM based controller inheritance, as mentioned in the angular Docs.

    
Base Controller         


        
                      

              相关标签:
       
      

Answer 1

Take a look at the $broadcast method. Quoting the docs:

Dispatches an event name downwards to all child scopes (and their children) notifying the registered ng.$rootScope.Scope#$on listeners.

Answer 2

You cannot directly refer to the string value in the child controller. Because of prototypal inheritance setting the property value on child scope (which gets created when you use a child controller) creates that property on the child scope rather than updating the parent scope property.

Your scope is not the model and therefore we should avoid polluting the $scope variable with lots of properties. Create a model object and create sub properties on it. This object can then be passed along the child controllers\scope.

I modified your jsfiddle to explain the above point.

Also I highly recommend you to go through this wiki page, to understand the nuisances of prototypal inheritance.

Answer 3

That happens because ngController create a new $scope and the reference for value is not the same. You can resolve that using the $parent property like that:

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{$parent.value}}</p>
    </div>
</div>

And in the DerivedController you can use something like that:$scope.$parent.value

But the best way to implement that it is to use the controllerAs syntax.

<div ng-controller="BaseController as BaseController ">
<p>Base Controller Value: {{BaseController.value}}</p>
<div ng-controller="DerivedController">
    <p>Derived Controller Value: {{BaseController.value}}</p>
</div>

And in the DerivedController you can use something like that:$scope.BaseController.value

That give to the code more readability, because you know what is the controller you are referencing. More about that in ngController Docs or Digging into Angular’s “Controller as” syntax by ToddMotto

Answer 4

The binding in your fiddle is directly on a property in scope. The inheritance that you need can be achieved by having the data binding on an object in the scope.

http://jsfiddle.net/2Dtyq/

scope.shared = {}    
scope.shared.value = "Something"

Instead of just

scope.value= "Something"

What is happening?
While DerivedController is constructed, the scope being passed in prototypically inherits from the scope of BaseController.
DerivedController's scope object still doesn't have its own property called "value". Therefore it still binds to the property that it got from parent's scope.
Now if you click on the Update In Base button, it will reflect in both the bindings. The moment you click on Update In Derived button, a new property named "value" is created on the DerviedController's scope. Therefore the binding to the parent's value property is broken. Any more clicks on Update In Base doesn't refresh the second data binding.
Putting it in a separate object prevents a new property from being created so the inheritance is still maintained.

Answer 5

When multiple controllers need access to the same data, a service should be used. You should not rely on scope inheritance, as it restricts how you can write your HTML. E.g., in the future, you made decide that DerivedController should not be a child of BaseController.

Your service should typically provide a public API, and hide the implementation. This makes it easier to refactor the internals.

HTML:

<div ng-controller="BaseController">
    <p>Base Controller Value: {{model.getValue()}}</p>
    <button ng-click="model.updateValue('Value updated from Base')">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{model.getValue()}}</p>
        <button ng-click="model.updateValue('Value updated from Derived')">Update In Derived</button>
    </div>
</div>

JavaScript:

app.factory('sharedModel', function () {
    // private stuff
    var model = {
        value: "initial Value"
    };
    // public API
    return {
        getValue:    function() { 
           return model.value; 
        },
        updateValue: function(value) {
           model.value = value;
        }
    };
});

function BaseController($scope, sharedModel) {
    $scope.model = sharedModel;
}

function DerivedController($scope, sharedModel) {
    $scope.model = sharedModel;
}

Fiddle.

Also, I do not recommend using $rootScope for sharing between controllers.

Answer 6

Use objects instead of using primitive value. In your case define an object like this

$scope.obj = {"value":"base"}; 

and try(obj.value). it will work.