AngularJS: ngView inside a custom directive

Question

I'm trying to use ng-view inside a custom directive but it's not working and it's also not giving me any console error.

This is my directive:

(function() {
    'use strict';

    angular
        .module('app')
        .directive('header', Header);

    Header.$inject = ['USER_AGENT'];

    function Header(USER_AGENT) {
        return {
            restrict: 'A',
            templateUrl: 'app/shared/header/header.html',
            controller: controller
        }

        function controller($scope) {
            $scope.isMobile = USER_AGENT.isMobile;
        }
    }

})();

And inside header.html file I have a call to ng-view just like I was calling it outside (when it was working). Is it possible to nest ngView inside a custom directive?

Not sure if this can be worked out or not, but, IMHO, this is a bad idea. — ABOS
– ABOS, Commented Apr 9, 2015 at 11:57
I'm wondering wether your directive should be applied to an element instead so restrict : 'E' , and usage <header></header> ? But I agree with the last comment usually you want ng-view in the index.html file... not in a directive — Chris Noring
– Chris Noring, Commented Apr 9, 2015 at 11:59
Yes, I know that, but in this case I really need it that way. And if I make <header></header> probably I'll have some IE restrictions. — Matheus Lima
– Matheus Lima, Commented Apr 9, 2015 at 12:02
Have you tried to simulate a $rootScope.$broadcast('$routeChangeSuccess', nextRoute, lastRoute); by yourself? maybe that works (even if its pretty dirty) — Nano
– Nano, Commented Apr 9, 2015 at 12:19

v1vendi · Accepted Answer · 2015-04-10 15:39:57Z

2

AngularJS does not support multiple ng-views in one app. If you want it - you have to use another routing engine, for example Angular UI's ui-router

answered Apr 10, 2015 at 15:39

v1vendi

6234 silver badges9 bronze badges

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

1 Comment

Bruno Finger Over a year ago

As long as you understand how ngRoute works, you can make it work with multiple views: liamkaufman.com/blog/2013/11/11/…

Matias Fernandez Martinez · Accepted Answer · 2015-04-10 15:56:43Z

0

Even if you could use it you shouldn't because is not the correct approach for Angular a directive should be treated like a web component like input, select, etc.

Just remember that your header.html is just a view and can be used by pretty much anything, is just the view

.directive('myDirective', function($timeout) {
  return {
    restrict: 'A',
    templateUrl: 'app/shared/header/header.html',
    controller: controller
});

Or (using ui-router)

$stateProvider
  .state('home', {
    url: '/?accountkey',
    templateUrl: 'app/shared/header/header.html',
    controller: controller
});

answered Apr 10, 2015 at 15:56

Matias Fernandez Martinez

1,88513 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS: ngView inside a custom directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related