ngView中的嵌套指令不起作用Angular JS

Question

我的确有问题，因为这个stackoverflow question。嵌套指令不适用于ngview和routeconfig。但是我的问题与语法无关。

我已经定义模块如下：

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

配置代码：

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指令

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

    } 
    }; 
}); 

hiDashboard指令

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

实际HTML代码

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

HTML代码从开发者工具查看时

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

预计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> 

问题： 我没有看到任何错误，在控制台，但<hi-dashboard>内容'This is dashboard directive'不会在浏览器中显示。任何帮助，将不胜感激。

Answer 1

模板在你的指令拼写错误：

tempalte: 'This is dashboard directive'

应该

template: 'This is dashboard directive'