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, Apr 09 '15 at 11:57
I'm wondering wether your directive should be applied to an element instead so restrict : 'E' , and usage
? But I agree with the last comment usually you want ng-view in the index.html file... not in a directive — Chris Noring, Apr 09 '15 at 11:59
Yes, I know that, but in this case I really need it that way. And if I make
probably I'll have some IE restrictions. — Matheus Lima, Apr 09 '15 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, Apr 09 '15 at 12:19

score 2 · Accepted Answer · answered Apr 10 '15 at 15:39

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 '15 at 15:39

v1vendi

603
4
9

As long as you understand how `ngRoute` works, you can make it work with multiple views: http://liamkaufman.com/blog/2013/11/11/understanding-angularjs-directives-part2-ng-view/ – Bruno Finger Oct 07 '15 at 11:11

score 0 · Answer 2 · answered Apr 10 '15 at 15:56

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
});

AngularJS: ngView inside a custom directive

2 Answers2