gpt4 book ai didi

javascript - 未呈现 AngularJS 指令

转载 作者:行者123 更新时间:2023-11-30 12:17:35 26 4
gpt4 key购买 nike

我正在尝试制作一个简单的 AngularJS 指令,但它没有显示。

index.html w/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>

data-table.html(与index.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 加载模板。

Here is the code at Plunker

最佳答案

你必须重命名指令元素......不知何故“data-”前缀搞砸了,“dataTable”无法被 Angular 识别......

关于javascript - 未呈现 AngularJS 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32008361/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com