使用angularjs指令编译文本框

Question

我想在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>

Answer 1

我刚刚像下面这样更新了代码。问题是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> ");
}