How to compile dynamically added directive in angular

[Akshath Kumar]

Hi,

I Have one scenario where i am adding directives dynamically from another directive of an html element.The problem is that the dynamically loaded directive couldn't get compiled. 

1.my html element look like,

<div class="form-control contentEditDiv" fg-custom-attributes fg-field-input="" fg-placeholder="field.schema.placeholder" ng-model="form.data[field.schema.name]" title="{{ field.schema.tooltip }}" tabindex="{{ tabIndex }}" ng-required="field.schema.validation.required" ng-minlength="{{ field.schema.validation.minlength }}" ng-maxlength="{{ field.schema.validation.maxlength }}" ng-pattern="{{ field.schema.validation.pattern }}"></div></div>');

2. directive code to add dynamic directives,

fg.directive('fgCustomAttributes', function($compile) {

  /*

    This Directive which will add custom attributes at the time of rendering the template. 

    */

    return { 

      scope:true,

      link: function($scope, $element, $attrs) {

        if($scope.form.schema.fields.length>0){

           for(var n=0;n<$scope.form.schema.fields.length;n++){

             if($scope.form.schema.fields[n].customlist!== undefined){

              optionsOfDirective= $scope.form.schema.fields[n].customlist;

              for (var i = 0; i < optionsOfDirective.length; i++) {

                var text = optionsOfDirective[i].text;

                var value = optionsOfDirective[i].value;

                $element.attr(value, text); //adding directive dynamically from an object

                           /* here the dynamically added directive couldn't get compiled. */

          }

        }

      }

    }

      }

    };

  });

3. At last the element look like,

<div class="form-control contentEditDiv ng-scope ng-pristine ng-valid ng-valid-required" fg-custom-attributes="" fg-field-input="" fg-placeholder="field.schema.placeholder" ng-model="message" title="Content to be posted" tabindex="auto" ng-required="field.schema.validation.required" ng-minlength="" ng-maxlength="" ng-pattern="/" contenteditable="true" ng-class="{focused: hasFocus}" no-line-breaks="true" strip-br="false" select-non-editabl="true" id="contentEditDiv" placeholder="Content goes here"></div>

here the yellow background text is indicating the newly added directives but which are no getting compiled.

Please help me to sort out this issue..

Regards,

Akshath

[Akshath Kumar]

Hi,

Could any one please help me to sort out this issue.

Thanks & Regards,

 

Akshath kumar M

Mob : +919567102617

 

baabte℠ System Technologies Pvt Ltd.

An ISO 9001 : 2008 certified company

Office: + 91495-2295550 | Mob : +919539906339

www.baabte.com | www.baabtra.com | www.massbaab.com

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/2fXeMtKbooM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Chris Huston]

Below is a directive I use for dynamically loaded html with angular content. I haven't used this inside another directive, but it might get you going:

<div dynamic="html_with_angular_here"></div>

App.directive('dynamic', function ($compile) {
        return {
            restrict: 'A',
            replace: true,
            scope: { dynamic: '=dynamic'},
            link: function postLink(scope, element, attrs) {
                scope.$watch( 'dynamic' , function(html){
                    element.html(html);
                    $compile(element.contents())(scope);
                });
            }
        };
    });

[Akshath Kumar]

Dear Chris,

Thank you for your valid reply.

Actually am using the dynamic directive inside a directive. While i using the $compile inside the directive the outcome will be a infinite loop. How can i fix this issue while i have loading a directive inside another directive.

Thanks & Regards,

 

Akshath kumar M

Mob : +919567102617

 

baabte℠ System Technologies Pvt Ltd.

An ISO 9001 : 2008 certified company

Office: + 91495-2295550 | Mob : +919539906339

www.baabte.com | www.baabtra.com | www.massbaab.com

[Sander Elias]

Hi Akshath,

If you have questions like this, and want a swift reaction, it's a good idea to provide a plunker/codepen/jsbin, so that anyone that is willing to help you can see your code in action.

In your case, you can use priority to prevent the infinite loop. give the directive a priority of say 5000, and use that as the 3th parameter for your $compile function.

Regards

Sander

[Akshath Kumar]

Hi Sander,

At last i have got the solution for this. Thank you for your suggestions which is appreciable. 

Thanks & Regards,

 

Akshath kumar M

Mob : +919567102617

 

baabte℠ System Technologies Pvt Ltd.

An ISO 9001 : 2008 certified company

Office: + 91495-2295550 | Mob : +919539906339

www.baabte.com | www.baabtra.com | www.massbaab.com

--