我正在尝试制作一个简单的AngularJS指令，但它没有显示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Angular Sample </title>
</head>
<body ng-app="demo" ng-controller="HomeController">
<data-table data="collection"></data-table>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('demo', []);
app.controller('HomeController', function ( $scope ) {
$scope.collection = [
{ Experiment: 'CMS', 'LHC experiment ?': 'Yes', Type: 'General' },
{ Experiment: 'ATLAS', 'LHC experiment ?': 'Yes', Type: 'General' },
{ Experiment: 'LHCb', 'LHC experiment ?': 'Yes', Type: 'Specific' },
{ Experiment: 'ALICE', 'LHC experiment ?': 'Yes', Type: 'Specific' }
];
});
app.directive('dataTable', function(){
// The directive consists on an object that this function should return
return {
restrict: 'E', // define how the directive will be used
// 'E' for element, 'A' for attribute and 'C' for class
// 'EA' means element or attribute
templateUrl: 'data-table.html', // the template file
// if specified, the content of the HTML element to which the directive
// is applied will be overitten by this template
scope: { // contains the data passed to the directive as attributes
data: '='
},
// This function is executed when the directive is rendered
link: function(scope){
// scope.data will refer the data passed to the directive
// Defining titles of the table as the properties of the first
// object in data, as we assume all objects have the same properties
scope.titles = [];
if(scope.data != undefined && scope.data.length > 0){
for(attr in scope.data[0]){
scope.titles.push(attr);
}
}
}
};
});
</script>
</body>
</html>
<table>
<thead>
<!-- We assume that the list of titles will be declared -->
<th ng-repeat="title in titles"> {{ title }} </th>
</thead>
<tbody>
<!-- We assume that data is the collection of objects -->
<tr ng-repeat="item in data">
<td ng-repeat="title in titles"> {{ item[title] }} </td>
</tr>
</tbody>
</table>
我正在使用Apache（localhost /../ index.html）浏览页面，因此angular应该能够使用AJAX加载模板。
答案 0 :(得分：3)
你必须重命名指令元素......不知何故，＆＃34;数据 - ＆＃34;前缀搞砸事情和＆＃34; dataTable＆＃34;没有被角度识别......