Fatal编程技术网

Javascript 未呈现AngularJS指令

javascript angularjs

Javascript 未呈现AngularJS指令,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图做一个简单的AngularJS指令，但它没有显示出来 index.html w/AngularJS脚本内联 角样 var app=angular.module（'demo'，[]）； 应用程序控制器（'HomeController'，函数（$scope）{ $scope.collection=[ {实验：'CMS'，'LHC实验？'：'Yes'，键入：'General'}， {实验：'ATLAS'，'LHC实验？'：'Yes'，键入：'General'}， {实验：'LHCb'，'LHC

我试图做一个简单的AngularJS指令，但它没有显示出来

index.html w/AngularJS脚本内联 

角样
var app=angular.module（'demo'，[]）；
应用程序控制器（'HomeController'，函数（$scope）{
$scope.collection=[
{实验：'CMS'，'LHC实验？'：'Yes'，键入：'General'}，
{实验：'ATLAS'，'LHC实验？'：'Yes'，键入：'General'}，
{实验：'LHCb'，'LHC实验？'：'Yes'，键入：'Specific'}，
{实验：'ALICE'，'LHC实验？'：'Yes'，键入：'Specific'}
];
});
app.directive（'dataTable'，function（）{
//指令包含此函数应返回的对象
返回{
restrict:'E'，//定义如何使用该指令
//“E”表示元素，“A”表示属性，“C”表示类
//“EA”指元素或属性
templateUrl:'data table.html'，//模板文件
//如果指定，则为指令所指向的HTML元素的内容
//应用的将由此模板覆盖
作用域：{//包含作为属性传递给指令的数据
数据：'='
},
//此函数在呈现指令时执行
链接：功能（范围）{
//scope.data将引用传递给指令的数据
//将表的标题定义为第一个表的属性
//对象，因为我们假设所有对象都具有相同的属性
scope.titles=[]；
如果（scope.data！=未定义&&scope.data.length>0）{
for（作用域数据[0]中的属性）{
范围.标题.推送（attr）；
}
}
}
};
});
data-table.html（与index.html位于同一目录中） 

{{title}}
{{项目[标题]}}
我正在使用Apache（localhost/./index.html）浏览页面，因此angular应该能够使用AJAX加载模板

您必须重命名指令元素。。。不知怎的，“数据-”前缀把事情搞砸了，“数据表”不能被用户识别

@RameshRajendran在index.html中，就在body标记后面，我有
<!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>