Nested directive within ngView does not work Angular JS

问题

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.

回答1:

Template is spelled incorrectly in your directive:

tempalte: 'This is dashboard directive'

should be

template: 'This is dashboard directive'

来源：https://stackoverflow.com/questions/31214894/nested-directive-within-ngview-does-not-work-angular-js