Angularjs 通过指令插入表_Angularjs

Angularjs 通过指令插入表

angularjs

Angularjs 通过指令插入表,angularjs,Angularjs,我试图通过Angular1.3中的指令插入一个表- 控制器 var studentControllerModule = angular.module('studentDetailApp.controllers', []); /*StudentController: controller for students*/ studentControllerModule.controller('StudentController', function ($scope) { $scope.stude

我试图通过Angular1.3中的指令插入一个表-

控制器

var studentControllerModule = angular.module('studentDetailApp.controllers', []); 
/*StudentController: controller for students*/ 
studentControllerModule.controller('StudentController', function ($scope) { 
$scope.studentList = [ ....];
 });

指示

angular.module('studentDetailApp.directives',[]).directive('studentDirective', function () {
    return {
        template: '<table><thead><tr> <th>NAME</th><th>COUNTRY</th></tr></thead><tbody> <tr ng-repeat="aStudent in studentList"><td>{{aStudent.name }}</td><td>{{aStudent.country }}</td></tr></tbody></table>'};
});

angular.module（'studentDetailApp.directions'，[]）。directive（'studentDirective'，function（）{
返回{
模板：“NAMECOUNTRY{{aStudent.name}{{{aStudent.country}}}”；
});

index.html

    <html lang="en" ng-app="studentDetailApp">
<head>
    <title>AngularJS Partial example</title>
    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>
</head>
<body>
    <div ng-controller="StudentController"> 
    <div studentDirective></div>
    </div>
</body>
</html>


AngularJS部分示例

我也不例外，但我也看不到那张桌子。

我做错了什么？

您丢失了ng应用程序，需要在html中规范指令：修改的HTML：

<body ng-app="studentDetailApp">
    <div ng-controller="StudentController"> 
        <div class='a' student-directive></div>
    </div>
</body>

修改的JS：

var app = angular.module('studentDetailApp', []);

app.controller('StudentController', function ($scope) { 
    $scope.studentList = ['nate', 'john', 'seth'];
 });

app.directive('studentDirective', function () {
    return {
        template: '<table><thead><tr> <th>NAME</th><th>COUNTRY</th></tr></thead><tbody> <tr ng-repeat="aStudent in studentList"><td>{{aStudent.name }}</td><td>{{aStudent.country }}</td></tr></tbody></table>'
    };
});

var-app=angular.module（'studentDetailApp'，[]）；
app.controller（'StudentController'，函数（$scope）{
$scope.studentList=['nate'，'john'，'seth']；
});
app.directive（'studentDirective'，函数（）{
返回{
模板：“NAMECOUNTRY{{aStudent.name}}{{aStudent.country}”
};
});

如果向指令和console.log studentList添加链接函数，该函数是否存在？或者使用batarang chrome add-on你的ng应用程序在哪里？我在任何地方都看不到任何

。将其删除以测试备选方案。现在将其放回指令模板中-没有影响。发现问题是由于index.html（-case）上的指令命名不正确。