compile textbox using angularjs directive

Question

I want to compile textbox using directive in angularjs.
like custom textbox. can anyone help me?
when i am trying to complie line 1 textbox with tow argument it is problem.
Thanks in advance.
see on line no 1 -----------
it is tutorialspoint example i change some content in that.

<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>

Ali · Accepted Answer · 2015-08-12 15:08:58Z

2

I just updated the code like below. The issue was with the b tag, you didn't close it also you forgot to add double quotation in the name attribute.

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> ");

}

edited Aug 12, 2015 at 15:08

answered Aug 12, 2015 at 14:00

Ali

1,0959 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pratik deshai Over a year ago

element.html("Student: "+$scope.student.name +" , Roll No: "+$scope.student.rollno+" " + " <input ng-model='"+$scope.student.mytype+"' type='"+$scope.student.mytype+"' name='"+$scope.student.mytype+"' /> "); but when i add ng-model it not working

Ali Over a year ago

Hi, I don't see any reason to use compile function here. Basically the directive template will do the same thing. So just remove compile function and modify the template like the code

directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}} </b> <br/> <input ng-model='student.mytype' name='{{student.mytype}}' type='{{student.mytype}}' />";

. Also if you will use the ngModel here keep in mind that any time you update the textbox content,it will effect the other attributes.

Collectives™ on Stack Overflow

compile textbox using angularjs directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related