Automatically instantiate AngularJS controller nested in templateUrl

Question

I'm just learning Angular and have a very basic app set up. When rendering some data via the templateUrl property of a route, what would be the best way to include a sub-controller in the returned template? For example, including a "createOrEditItem" template at the bottom of a "viewItem" template so that the "createOrEditItem" can be reused on its own later?

I've tried putting a div in the template with its ng-controller attribute set to a controller name that I've defined at the app level, but it's not being activated. Should this be done with a directive instead to make it instantiate when the master controller has its contents set, or am I missing something more fundamental?

via the templateUrl property of a controller? AFAIK, controllers don't have templateUrls.. — tanmay
– tanmay, Commented May 11, 2017 at 13:20
maybe you are looking for a nested directives kind of thing.. check this plunker out for basic example of that — tanmay
– tanmay, Commented May 11, 2017 at 13:22
Thanks - I meant route not controller, and have edited the question! — tags2k
– tags2k, Commented May 11, 2017 at 13:47

tanmay · Accepted Answer · 2017-05-11 14:07:27Z

1

yes, as mentioned in the later part of the question, you should be using a directive. Or, if using AngularJS >= v1.5, component should be the choice because they are pluggable and works well with nesting too.

Note that for the route also, you can directly use a component like this:

var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
  template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
  //                    ^^^^ other components can be used here
  controller: function() {
    this.user = {name: 'world'};
  } 
});

myMod.config(function($routeProvider) {
  $routeProvider.when('/', {
    template: '<home></home>'
  });
});

Now, as the comment suggests, you can freely use other components in the template of home component.

Hope this helps a bit!

answered May 11, 2017 at 14:07

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tags2k Over a year ago

This was absolutely what I wanted! Components seem like the way forward then. Minimal fussing with controllers and a good amount of reuse?

tanmay Over a year ago

@tags2k correct! And, even from the forward compatibility (with Angular2 and 4) point of view, components are the way to go! Glad that helped a little..

Ronald Emergo · Accepted Answer · 2017-05-11 13:56:49Z

0

A directive can be used.

Another option is to use a seperate view/route. So when you add a ui-view tag, you could define your view and route.

This is explained here: https://scotch.io/tutorials/angular-routing-using-ui-router

answered May 11, 2017 at 13:56

Ronald Emergo

311 silver badge8 bronze badges

Collectives™ on Stack Overflow

Automatically instantiate AngularJS controller nested in templateUrl

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related