使用angularjs指令编译文本框

我想使用angularjs中的指令编译文本框。
喜欢自定义文本框。有人能帮我吗？
当我试图用两个参数来组合第1行文本框时，这是个问题。
提前感谢。
请参见第1行------------
这是一个例子，我改变了其中的一些内容

<div ng-app="mainApp" ng-controller="StudentController">
    <student name="Mahesh"></student><br/>
    <student name="Piyush"></student>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var mainApp = angular.module("mainApp", []);

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

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

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

            var linkFunction = function($scope, element, attributes) {
                element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>" +
                "<b> <input type='"+$scope.student.mytype+"' name='+$scope.student.mytype+'  > "); -----line 1
                //element.css("background-color", "#ff00ff");
            }

            return linkFunction;
        }

        return directive;
    });

    mainApp.controller('StudentController', function($scope) {
        $scope.Mahesh = {};
        $scope.Mahesh.name = "Mahesh Parashar";
        $scope.Mahesh.rollno  = 1;
        $scope.Mahesh.mytype = "email";

        $scope.Piyush = {};
        $scope.Piyush.name = "Piyush Parashar";
        $scope.Piyush.rollno  = 2;
        $scope.Piyush.mytype = "password";
    });
</script>

var mainApp=angular.module（“mainApp”，[]）；
mainApp.directive（'student'，function（）{
var指令={}；
directive.restrict='E'；
directive.template=“学生：{{Student.name}，卷号：{{{Student.rollno}}
”；
指令范围={
学生：“=姓名”
}
directive.compile=函数（元素、属性）{
//元素css（“边框”，“1px实体#cccc”）；
var linkFunction=函数（$scope，element，attributes）{
html（“学生：++$scope.Student.name+”，卷号：++$scope.Student.rollno+”
+
“”）；第1行
//css（“背景色”，“#ff00ff”）；
}
返回链接函数；
}
返回指令；
});
mainApp.controller（'StudentController'，函数（$scope）{
$scope.Mahesh={}；
$scope.Mahesh.name=“Mahesh Parashar”；
$scope.Mahesh.rollno=1；
$scope.Mahesh.mytype=“电子邮件”；
$scope.Piyush={}；
$scope.Piyush.name=“Piyush Parashar”；
$scope.Piyush.rollno=2；
$scope.Piyush.mytype=“密码”；
});

我刚刚更新了如下代码。问题在于b标记，您没有关闭它，而且忘记在name属性中添加双引号

var linkFunction = function($scope, element, attributes) {
        element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>" +
        "<b> <input type='"+$scope.student.mytype+"' name='"+$scope.student.mytype+"'  /></b> ");

}

var linkFunction=function（$scope，element，attributes）{
html（“学生：++$scope.Student.name+”，卷号：++$scope.Student.rollno+”
+
"  ");
}

element.html（“学生：++$scope.Student.name+”，卷号：++$scope.Student.rollno+”
“+”；但当我添加ng模型时，它不工作，我看不出有任何理由在这里使用编译函数。基本上，指令模板也会做同样的事情。因此，只需删除编译函数并修改模板，如代码

directive.template=“Student:{{{Student.name}}，Roll No:{{{Student.rollno}}
”。此外，如果在这里使用ngModel，请记住，任何时候更新文本框内容，都会影响其他属性。