$compile is not defined

Question

Dynamic creation of elements using angular.elements - AngularJS

I need to create a directive element using angular. But no luck in using angular.element . Ended up with $compile is not defined error. Any help is much appreciated.

text-field-personal.html

<input ng-focus="setIndex(field.id);field.focus()" id="{{field.id}}"
       type="{{field.type}}" name="{{field.id}}" ng-model="field.text"
       class="login_input_personal {{field.selectedClass}} {{enabledCursor}} {{field.text == '' ? 'blank' : ''}}"
       ng-mouseup="clearSelected(field.id);"
       ng-mousedown="startDrag(field.id);" />
<div class="placeholder" ng-show="field.text == ''"
  {{interfaceLabels[field.defaultText]}}
</div>
<div class="placeholder" ng-show="field.text == ''"></div>
<a class="clear-textfield" ng-click="clearTextField();"
   ng-if="emailTextfieldClearButton"
   ng-show="field.text != '' && field.selectedClass != ''">
</a>

And this is my

textField.js

angular
.module("textBoxUi")
.directive("textFieldPersonal", ['$rootScope', function($rootScope) {
    return {
        restrict : 'E',
        templateUrl : 'components/text-field-personal.html',
        scope : {
         field : "="
        },

        link : function (scope, element, attr) {
            scope.interfaceLabels = scope.$parent.interfaceLabels;
            scope.emailTextfieldClearButton = $rootScope.emailTextfieldClearButton;
            scope.enabledCursor = $rootScope.enabledCursor;
            scope.setIndex= function(id){
                $rootScope.textFieldIndex = document.getElementById(id).selectionStart;
            };
            scope.startDrag = function(e){
                var e = window.event;
                scope.startDragX = e.pageX;
                e = null;
            };
            scope.clearSelected = function(id){
                var e = window.event;
                scope.stopDragX = e.pageX;
                if(scope.stopDragX > scope.startDragX){
                    document.getElementById(id).setSelectionRange(document.getElementById(id).selectionEnd, document.getElementById(id).selectionEnd);
                    $rootScope.textFieldIndex = document.getElementById(id).selectionEnd;
                }else {
                    document.getElementById(id).setSelectionRange(document.getElementById(id).selectionStart, document.getElementById(id).selectionStart);
                    $rootScope.textFieldIndex = document.getElementById(id).selectionStart;
                }
                e = null;
            };
            scope.clearTextField = function(){
                $rootScope.targetField.text ="";
                $rootScope.hideEmailExtensionTop();
                document.getElementById($rootScope.targetField.id).value = $rootScope.targetField.text;
                if(typeof(scope.field.callback) === "function"){
                    scope.field.callback();
                }
            };

            scope.enabledCursorWatch = $rootScope.$watch('enabledCursor', function(){
                scope.enabledCursor = $rootScope.enabledCursor;
            });

        }
    }
}]);

In my index.html i would use my directive like the following

<text-field-personal> </text-field-personal>

But i would like to create the same in javascript DOM elements. Tried like the following but no luck.

  var divv = document.createElement("div");
  var newDirective = angular.element("<input ng-focus='setIndex(field.id);field.focus()' id='{{field.id}}' type='{{field.type}}' name='{{field.id}}' ng-model='field.text' class='login_input_new {{field.selectedClass}} {{enabledCursor}} {{field.text == '' ? 'blank' : ''}}' ng-mouseup='clearSelected(field.id);' ng-mousedown='startDrag(field.id);'/><a class='clear-textfield' ng-click='clearTextField();' ng-if='emailTextfieldClearButton' ng-show='field.text != '' && field.selectedClass != '''></a>");
  divv.append(newDirective);
  $compile(newDirective)($scope);

Answer 1

$compile is not defined because it is not injected into the directive:

angular
.module("textBoxUi")
̶.̶d̶i̶r̶e̶c̶t̶i̶v̶e̶(̶"̶t̶e̶x̶t̶F̶i̶e̶l̶d̶P̶e̶r̶s̶o̶n̶a̶l̶"̶,̶ ̶[̶'̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶)̶ ̶{̶ 
.directive("textFieldPersonal", function($rootScope, $compile) {