Javascript 角度指令用法的问题

您好，我有一个要求，就像我将获得一个元素数组作为指令的属性，并且根据数组对象的大小，我必须迭代并创建模板。请在下面找到我的JS类

mainApp.directive('student', function() {
    var directive = {};
    directive.restrict = 'E';
    directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

    directive.scope = {
        student : "=name"
    }

    directive.compile = function(element, attributes) {
       element.css("border", "1px solid #cccccc");

       var linkFunction = function($scope, element, attributes) {
            for (i = 0;i<$scope.student.length;i++){
               element.html("Student: <b>"+$scope.student[i].name +"</b> , Roll No: <b>"+$scope.student[i].rollno+"</b><br/>");
            }
        }

        return linkFunction;
     }

     return directive;
});

我的html就像

<student name="students"></student><br/>

中还提供了一个工作示例

---

问题是第一个学生对象被第二个学生对象覆盖。请告诉我如何更正。

您的

元素。html

更新元素的html。您多次更新内容，最后一次更新就是您最终看到的内容。使用

element.append

，在迭代过程中追加模板。

给您：

mainApp.directive('student', function() {
    var directive = {};
    directive.restrict = 'E';
    directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

    directive.scope = {
        student : "=name"
    };

    directive.compile = function(element, attributes) {
        element.css("border", "1px solid #cccccc");

        var linkFunction = function($scope, element, attributes) {
            for (i = 0;i<$scope.student.length;i++){
                element.append("Student: <b>"+$scope.student[i].name +"</b> , Roll No: <b>"+$scope.student[i].rollno+"</b><br/>");
            }
        }

        return linkFunction;
    }

    return directive;
});

mainApp.directive（'student'，function（）{
var指令={}；
directive.restrict='E'；
directive.template=“学生：{{Student.name}，卷号：{{{Student.rollno}”；
指令范围={
学生：“=姓名”
};
directive.compile=函数（元素、属性）{
元素css（“边框”，“1px实体#cccc”）；
var linkFunction=函数（$scope，element，attributes）{
对于（i=0；i
mainApp.directive('student', function() {
    var directive = {};
    directive.restrict = 'E';
    directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

    directive.scope = {
        student : "=name"
    };

    directive.compile = function(element, attributes) {
        element.css("border", "1px solid #cccccc");

        var linkFunction = function($scope, element, attributes) {
            for (i = 0;i<$scope.student.length;i++){
                element.append("Student: <b>"+$scope.student[i].name +"</b> , Roll No: <b>"+$scope.student[i].rollno+"</b><br/>");
            }
        }

        return linkFunction;
    }

    return directive;
});