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指令不顯示

回答

相關問題