Nested directive within ngView does not work Angular JS

Question

I'm having exact problem as this stackoverflow question. Nested directive does not work with ngview and routeconfig. But my problem is not related to syntax.

I have defined modules as below:

angular.module('hiDashboard', []);
angular.module('hiFramework', ['hiDashboard']);
angular.module('app', ['hiFramework']);

Config code:

angular.module('app').config(function ($routeProvider) {
  var routes = [
    {
      url: '/dashboard',
      config: { template: '<wwa-dashboard></wwa-dashboard>' }
    },
    {
      url: '/friends',
      config: { template: '<wwa-friends></wwa-friends>' }
    },
    {
      url: '/favouriteList',
      config: { template: '<wwa-favourite-list></wwa-favourite-list>' }
    }
  ];
  routes.forEach(function (route) {
    $routeProvider.when(route.url, route.config);
  });

   $routeProvider.otherwise({redirectTo: '/dashboard'});

});

wwaDashboard Directive

"use strict";
angular.module('app').directive('wwaDashboard', function () {
  return {
    restrict: 'AE',
    scope: {},
    template: '<hi-dashboard></hi-dashboard>',
    link: function (scope) {

    }
  };
});

hiDashboard directive

"use strict";
angular.module('hiDashboard').directive('hiDashboard', function () {
  return {
    restrict: 'AE',
    tempalte: 'This is dashboard directive'
  };
});

Actual HTML Code

<div ng-view class="hi-dashboard-view"></div>

HTML Code when viewed from Developer Tools

<div ng-view class="hi-dashboard-view ng-scope">
 <wwa-dashboard class="ng-scope ng-isolate-scope">
  <hi-dashboard></hi-dashboard>
</wwa-dashboard>
</div>

Expected HTML:

<div ng-view class="hi-dashboard-view ng-scope">
 <wwa-dashboard class="ng-scope ng-isolate-scope">
  <hi-dashboard>This is dashboard directive</hi-dashboard>
</wwa-dashboard>
</div>

Problem: I do not see any errors in console but <hi-dashboard> content 'This is dashboard directive' is not displayed in the browser. Any help would be appreciated.

Jonathan Crowe · Accepted Answer · 2015-07-03 22:53:22Z

0

Template is spelled incorrectly in your directive:

tempalte: 'This is dashboard directive'

should be

template: 'This is dashboard directive'

answered Jul 3, 2015 at 22:53

Jonathan Crowe

5,8031 gold badge20 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Nested directive within ngView does not work Angular JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related