ngView 中的嵌套指令不起作用 Angular JS [英] Nested directive within ngView does not work Angular JS

问题描述

我遇到了这个stackoverflow 问题.嵌套指令不适用于 ngview 和 routeconfig.但我的问题与语法无关.

我定义的模块如下:

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

配置代码:

angular.module('app').config(function ($routeProvider) {无功路线= [{网址:'/仪表板'，配置:{ 模板:'<wwa-dashboard></wwa-dashboard>'}},{网址:'/朋友'，配置:{ 模板:'<wwa-friends></wwa-friends>'}},{网址:'/收藏夹'，配置:{ 模板:'<wwa-favourite-list></wwa-favourite-list>'}}];路线.forEach(功能(路线){$routeProvider.when(route.url, route.config);});$routeProvider.otherwise({redirectTo: '/dashboard'});});

wwaDashboard 指令

"使用严格";angular.module('app').directive('wwaDashboard', function () {返回 {限制:'AE'，范围: {}，模板:'<hi-dashboard></hi-dashboard>',链接:功能(范围){}};});

hiDashboard 指令

"使用严格";angular.module('hiDashboard').directive('hiDashboard', function () {返回 {限制:'AE'，模板:'这是仪表板指令'};});

实际的 HTML 代码

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

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

预期的 HTML:

<wwa-dashboard class="ng-scope ng-isolate-scope"><hi-dashboard>这是仪表板指令</hi-dashboard></wwa-dashboard>

问题:我在控制台中没有看到任何错误，但 内容 'This is dashboard directive' 未显示在浏览器中.任何帮助将不胜感激.

解决方案

模板在您的指令中拼写错误:

模板:'这是仪表板指令'

应该

模板:'这是仪表板指令'

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.

解决方案

Template is spelled incorrectly in your directive:

tempalte: 'This is dashboard directive'

should be

template: 'This is dashboard directive'

这篇关于ngView 中的嵌套指令不起作用 Angular JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！