AngularJS指令不显示

这已经完全推动了我现在几个小时的墙壁。AngularJS指令不显示

我有我的app.js

'use strict'; 

/** 
* @ngdoc overview 
* @name myWellnessTrackerApp 
* @description 
* # myWellnessTrackerApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('myWellnessTrackerApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    });

我的main.html中，如上图所示，其加载到负载上的主页。

<innerPageHeader> </innerPageHeader>

我的指令。

angular.module('myWellnessTrackerApp') 
    .directive('innerPageHeader' ,function() { 
    return { 
     template: '<h4>TEST</h4>', 
     restrict: 'E' 
    }; 
    });

而且我的index.html scritps：

<!-- build:js(**/*) scripts/vendor.js --> 
<!-- bower:js --> 
<script src="components/modernizr/modernizr.js"></script> 
<script src="components/jquery/dist/jquery.js"></script> 
<script src="components/angular/angular.js"></script> 
<script src="components/angular-animate/angular-animate.js"></script> 
<script src="components/angular-cookies/angular-cookies.js"></script> 
<script src="components/angular-resource/angular-resource.js"></script> 
<script src="components/angular-route/angular-route.js"></script> 
<script src="components/angular-sanitize/angular-sanitize.js"></script> 
<script src="components/angular-touch/angular-touch.js"></script> 
<script src="components/fastclick/lib/fastclick.js"></script> 
<script src="components/jquery.cookie/jquery.cookie.js"></script> 
<script src="components/jquery-placeholder/jquery.placeholder.js"></script> 
<script src="components/foundation/js/foundation.js"></script> 
<!-- endbower --> 
<!-- endbuild --> 
<!-- build:js({.tmp,app}) scripts/scripts.js --> 
<script src="scripts/app.js"></script> 
<script src="scripts/controllers/main.js"></script> 
<script src="scripts/controllers/about.js"></script> 
<script src="scripts/directives/innerpageheader.js"></script>

当加载该页面只是显示

<innerPageHeader> </innerPageHeader>

随着这应该是没有指令内容

<innerPageHeader><h4>TEST</h4> </innerPageHeader>

来源

2015-02-11 LmC

你需要使用下面的指令秒。

<inner-page-header></inner-page-header>

来源

2015-02-11 09:45:55 thedoctor

的作品，是很烦人:( 你能告诉我，为什么它必须是名名名时名字只是nameNameName？ – LmC 2015-02-11 09:47:51

我不知道为什么它已经做了这样一个明确的解释尽管它似乎是html/xml文档的惯例。 – thedoctor 2015-02-11 09:53:17

我相信你已经知道了这一点，但原因是因为规范化。在规范化过程中，角转换 - 分隔名称为camelCase。

这就是您在AngularJS中指定指令时应该使用camelCase的原因。

来源

2016-02-02 22:40:57 Schw2iizer

AngularJS指令不显示

回答

相关问题