Tukukkk

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

$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) {