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?

Answer 1

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

Answer 2

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