AngularJS指令未显示
AngularJS Directive Not Showing
这已经把我逼上了好几个小时。
我有我的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草稿:
<!-- 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>
您需要使用如下指令。
<inner-page-header></inner-page-header>
我相信您已经了解了这一点,但原因是由于规范化。在规范化过程中,Angular将分隔的名称转换为camelCase。
这就是为什么在AngularJS中指定指令时应该使用camelCase。
相关文章:
- AngularJs|Don'在成功加载所有指令htmls之前,不显示页面
- 显示/隐藏有关模型更改的指令内容
- 指令未以角度显示
- 显示指令时调用指令方法
- 如何在html中以角度显示自定义指令的作用域
- 一次显示一个隐藏指令-AngularJS
- 一次显示一个指令AngularJS
- 如何在 AngularJS 中创建和显示多个自定义指令
- 指令中的数据未在ng重复中显示
- 角度指令未显示
- AngularJS指令模板不显示HTML
- AngularJS自定义指令ng显示/ng隐藏
- 日期-时间范围指令字段未显示任何值
- Angularjs-将指令中的值绑定到文档中的任意位置显示/隐藏
- Angular.js自定义指令未多次显示
- AngularJS指令未显示
- AngularJS指令未显示在模板上
- 如何在当前元素之外显示指令
- 如何在带角度传单的Marker Popup指令中显示指令
- ng显示指令更改相关作用域值后不更新