CODEWITHSUNDEEP
angularjsangularjs-scope
Darwin Tech
Darwin Tech

Reputation: 18929

Angular controller inheritance with view routing

I have an Angular app, and I am currently using $routeProvider to route the urls to a template with an ng-view directive:

app.js

.config( function ($interpolateProvider, $routeProvider) {
$routeProvider
    .when('/project/:projectId', {
        // this is the partial...
        templateUrl : 'partials/_project_detail.html',
        controller: 'ProjectDetailCtrl',
        resolve: {
            project: function ($route, MyService) {
                return MyService.get('projects/', $route.current.params.projectId);
        }
    })
})

.controller('ProjectDetailCtrl', function ($scope, project) {
    ...
    $scope.project = project;
})

index.html

...
<div ng-view></div>
...

Now, I would like to use controller scope inheritance to have a child controller within the parent one, along the lines of:

project_detail.tmpl.html

...
<h2>Project: {{ project.title }}</h2> <!-- this works -->

<div ng-controller="ChildCtrl">
   <h2>Project: {{ project.title }}</h2> <!-- this doesn't work -->
</div>
...

But this doesn't seem to work. I know according to the Angular docs that you can inherit scope between parent and child scopes if both controllers are declared in the template: http://docs.angularjs.org/guide/controller

Is there some way to achieve inheritance using the router method?

Upvotes: 0

Views: 1476

Answers (1)

licancabur
licancabur

Reputation: 645

Maybe this is because you are binding to primitive value, instead of an object in your controller. Try using an object with dot notation, for example: {{ project.var1 }}

If this is the problem, I recommend you watching this video: Egghead.io

Upvotes: 0

Related Questions