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

Question

我遇到了与此 Whosebug 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'

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

Nested directive within ngView does not work Angular JS

angularjs

angularjs-directive

route-provider