哪个是在angularjs 1.x中创建指令的好方法

Question

我正在创建自定义指令来包装kendo控件。

使用

为此创建html的更好方法

1. 使用我在这个例子中有评论的编译功能。

或

1. 使用模板功能并创建一个独立的范围。

   angular.module("ui.Controls")
   .directive('customtextcontrol', textControl);
   
     function textControl() {
    return {
   replace: true,
   template: function (element, attrs) {
       var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
       return '<div class="form-group">' +
           '<label class="col-md-4 control-label text-right">' + attrs.caption + ' :</label>' +
           '<div class="col-md-8">' +
   
           //input field - text box
           '<input type="text" ng-model="nameditemvalue" tabindex="{{ tabindex }}"' +
           ' name="{{ controlName }}" class="k-textbox"  ' +
           'validationmessage="{{ onrequiredMessage }}" style="width: {{ cWidth }} !important" />' + //validation message
   
           //Span for error message
           ' <span class="k-invalid-msg" data-for="{{ controlName }}"></span>' +
           '</div>' +
           '</div>';
   },
   //compile: function (element, attrs) {
   //    var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
   //    var htmlText = '<div class="form-group">' +
   //        '<label class="col-md-4 control-label text-right">' + attrs.caption +' :</label>' +
   //        '<div class="col-md-8">' +
   
   //        //input field - text box
   //        '<input type="text" ' +
   //        'ng-model="' + attrs.nameditem +
   //        '" tabindex= ' + attrs.tab + ' "' +
   //        required +
   //        ' name="' + attrs.name + '" ' +
   //        'class="k-textbox"  ' +
   //        'validationmessage="{{ onrequiredMessage }}" ' +
   //        'style="width: {{ cWidth }} !important" />' +
   //        //Span for error message
   //        ' <span class="k-invalid-msg" data-for="{{ controlName }}"></span>' +
   //        '</div>' +
   //        '</div>';
   
   //    element.replaceWith(htmlText);
   //},
   scope: {
       label: '@caption', // caption of the control
       crequired: '@isrequired', //is field is required or not
       tabindex: '@tab', //tabindex of the control
       controlName: '@name', // name of the control
       nameditemvalue: "=nameditem", //nameditem is to bind with model.
       cWidth: "@width"
   },
   link: function (scope, elem, attr) {
       if (attr.isrequired != undefined) {
           scope.onrequiredMessage = attr.caption + " is required."; //generating validation message.
       }
    }
    };
   
   
     }