我正在尝试使用指令创建一个带有标题和主视图的基本应用程序。最初我将该指令放在一个单独的文件中，但已将其移至 app.js 以消除问题。
我尝试了一些不同的事情:
-
<app-header>&<div=app-header> - 将 templateUrl 更改为 template:"Test header"
- 链接指令和 app.directive
我的index.html:
<!DOCTYPE html>
<html lang="en" ng-app="simpleLoginApp">
<head>
<meta charset="utf-8" />
<title> Simple Login </title>
</head>
<body>
<div app-header></div>
<main role="main" ng-view></main>
<script src="resources/angular/angular.min.js"></script>
<script src="resources/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
我的app.js:
var app = angular.module('simpleLoginApp', ['ngRoute'])
.directive('app-header', function() {
return {
templateUrl: '/header/header.html'
};
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: '/login/login.html',
controller: 'LoginCtrl'
})
}]);
标题.html
<header>
<h1>HEADER</h1>
</header>
最佳答案
问题是你如何注册你的指令。定义指令时，应使用驼峰式大小写，例如appHeader 而不是 app-header。在模板中使用它时，您应该像以前一样使用破折号。可以查看文档here在标准化标题下
简而言之，改变
.directive('app-header', function() {
return {
templateUrl: '/header/header.html'
};
})
到
.directive('appHeader', function() {
return {
templateUrl: '/header/header.html'
};
})
关于javascript - AngularJS 指令的误解，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39088845/