Question

我想为layout（index.html）页面实现 angular header and footer directive 。

获取错误：[$ compile：tplrt]指令'header'的模板必须只有一个根元素。

这是 index.html （包括requirejs）

<div>   
   <div header ></div>
    <div>main content here{{1+2}} </div>
    <div footer></div>
</div>

header.html中：

<!--- angular header-->
<div>
    some stuff
</div>
<div>
    some other stuff
</div>
<!--- angular header-->

header.js （指令）

angular.module('header', [])
.directive('header', function () {
    return {
        restrict: 'A', //This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
        replace: true,
        //scope: {user: '='}, // This is one of the cool things :). Will be explained in post.
        templateUrl: base_url+"angular/js/directives/admin/header.html",
         controller: ['$scope', '$filter', function ($scope, $filter) { 
            // Your behaviour goes here :) 
        }] 
    }
});

当我对templateUrl发表评论时，错误将被删除。

app.js

var base_url="http://localhost/angular_layout/";
define(['angularAMD','header', 'ngRoute', ], function (angularAMD) {
var app = angular.module('angularapp', ['header','ngRoute' ]);  
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
............

main.js

//var base_url="http://localhost/ums/angular/js";
require.config({ 
baseUrl: "http://localhost/angular_layout/angular/js",
    paths: {
        'header': 'directives/admin/header',
        'footer': 'directives/admin/footer',
        'angular': 'lib/angular.min',
        'ngRoute': 'lib/angular-route.min',
        ..........

注意： 如果没有此页眉和页脚指令的概念，则没有任何问题。

Answer 1

当您的header.html没有根元素时会发生这种情况。将您的header.html代码更改为：

错误：[$ compile：tplrt]指令'header'的模板必须只有一个根元素

1 个答案: