Compiling dynamic content - AngularJS

Question

I'm rewording this question as I think the original wasn't too clear.

Basically, I have a 'wrapper' directive where I am attempting to dynamically add attributes to one of the wrapped (transcluded) elements. I can get this to work, but Angular doesn't seem to be aware of the new attributes once added.

If I use $compile then Angular does recognise them - but at the expense of double-compiling the transcluded content, and in this case it then doubles the number of options in the select tag.

Here is a plunker that shows (with comments) what I am attempting, and the same code follows below for those who can look at code and suggest an answer just by looking: (note - my ultimate aim is to check the custom directive valid-form-group for the required attribute, and if found to apply it to the contained select tag)

HTML

<body ng-controller="MainCtrl">

  <form name="validationForm" novalidate>

    <valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>

      <select ng-model="data.option" ng-options="option.id as option.message for option in selectOptions" name="validInfo" id="validInfo">
        <option value="">-- Select a Question --</option>
      </select>

    </valid-form-group>

  </form>

</body>

JS

var app = angular.module('plunker', [])
  .controller('MainCtrl', function($scope) {
    $scope.selectOptions = [
      {id: 1, message: 'First option'}, 
      {id: 2, message: 'Second option'}, 
      {id: 3, message: 'Third option'}
    ];
  })
  .directive('validFormGroup', function($compile) {
    return {
      restrict: 'E',
      template: '<div><span ng-transclude></span></div>',
      replace: true,
      transclude: true,
      require: '^form',
      link: function(scope, element, attrs, ctrl) {

        if (attrs.required !== undefined) {

          var selectElement = angular.element(element.find('select'));
          // either of the below produce the same results
          selectElement.attr('ng-required', true);
          //selectElement.attr('required', true);

          // if the below is commented out it wont validate
          // BUT if it is left in it will recompile and add another 3 options
          $compile(selectElement)(scope); 
        }
      }
    };
  });

CSS

.has-error{
  border: solid 1px red;
}

Please note that the sample here is using 'required' (or ng-required) as the added attribute to highlight the fact that Angular does not recognise it unless compiled.

Any help or comments are welcome - a bit disappointed that I can't get this to work, so perhaps there's something fundamental I'm missing...

The plunker should help with visualising my problem.

edit - apologies for the delay in responding to the answers and comments. As mentioned in a comment or two below, personal issues have prevented me from being able to find the time to investigate.

Can't you put a conditional `ng-required` on the item: `ng-required="requiredItem". Like suggested [here](http://stackoverflow.com/q/13466133/1130908) — Ben Felda, Jun 19 '14 at 21:37
@Ben - I have a comment in the code sample above: // either of the below produce the same results selectElement.attr('ng-required', true); //selectElement.attr('required', true); Unfortunately (while this still adds the attribute dynamically) it's still not rendered by Angular. Note - I'm using 'required' as a sample here. This could refer to any directive which may have content that needs to be 'recognised' by Angular... — Sean, Jun 20 '14 at 06:33
Why you are trying to wrap this inside directive? It could be done in a simple way like this http://plnkr.co/edit/oFyDTa2anUQCLWOkwrW5?p=preview — Ammar Khan, Jun 22 '14 at 19:05
I am writing a wrapper for form group contents which involves a lot more than just the above (i.e. dynamically adding spans with relevant error messages based on label info etc). However, I'm stuck with the above concept - and I'm not particularly tied to 'include' or 'ng-include' - this is for illustration purposes of my issue only. Thanks for looking though - would appreciate it if you re-looked at the issue with this in mind. It's driving me insane! :) — Sean, Jun 22 '14 at 20:00

Khanh TO · Accepted Answer · 2014-06-23T15:55:52.223

3

Try this simple directive:

.directive('validFormGroup', function($compile) {
    return {
        restrict: 'A',
        replace: false,
        require: '^form',
        compile: function (element, attr) {
            if (attr.required !== undefined) {
                var selectElement = element.find('select');
                // either of the below produce the same results
                selectElement.attr('ng-required', true);
                //selectElement.attr('required', true);
            }
        }
    };
});

And use it as html attribute:

<div valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>

      <select ng-model="data.option" 
      ng-options="option.id as option.message for option in selectOptions"
      name="validInfo" id="validInfo" >
<option value="">-- Select a Question --</option>
</select>
      <br/>
      <br/>Required invalid? {{validationForm.validInfo.$error.required||false}}
      <br/>
      <br/>

</div>

DEMO

Explanation:

I don't use transclude at all in this solution as the purpose of this directive is just to modify the html before compiling with the scope, there is no need for transcluded content which is overly complicated.
Here I handle the compile function instead of the link function. compile function is a great place for you to modify html before linking to the scope.

edited Jun 23 '14 at 15:55

answered Jun 23 '14 at 15:42

Khanh TO

48,509
13
99
115

I agree, for this simplistic example you can get away without using transclude. However the OP indicated in the comments that he is working on something a lot more complex that the example posted. – Beyers Jun 23 '14 at 18:07
@Beyers: By complex, the OP wants to be able to `modify html dynamically`. In case we need to do things more complex, just write more code in the `compile` function. – Khanh TO Jun 24 '14 at 06:20
This seems far simpler - Beyers is correct in that my solution is more complex than just this sample and I'll see if what Khanh here suggests works for the whole scenario. I assume that the `compile` function occurs _after_ the transclusion has been performed, but _before_ linking to scope has occurred (as per your explanation above) Please note that my time at the pc is limited at the moment (sick kids) but will attend to this fully as soon as possible. – Sean Jun 25 '14 at 09:54
One more quick comment - I was using the `controller` in the link function to obtain the form name for other dynamic code. With the ^form option above, is it possible to get the form name to use within the `compile`function? – Sean Jun 25 '14 at 10:06
@Sean: I don't know if it's possible to get the form controller in the `compile`. But I think it makes more sense to obtain the `form` in the `link` function. `compile` is about modifying `template` which means it's `not functional yet`. `link` occurs when your template is `linked` (functional). There is no point in accessing the form controller when the directive is not functional yet as controller is about handling functional logic. – Khanh TO Jun 25 '14 at 12:01
@Sean: modify html template based `form` name is really not recommended in code design perspective (are you going to have some hard-coded form names in your directive?). Configuration information for a directive should be `meaningful` attributes of the current element. (not something vague as form name). – Khanh TO Jun 25 '14 at 14:28
@Sean Here is a good article on Compile, Pre- and Post-linking and what can and cannot be used for each: http://odetocode.com/blogs/scott/archive/2014/05/28/compile-pre-and-post-linking-in-angularjs.aspx – Beyers Jun 25 '14 at 19:18
@Khanh: I have found the time to investigate further. Unfortunately it appears that within the `compile` function the transcluded content is not available within the `element`. So the code `var selectElement = element.find('select');` does not return any element as the `select`is not there. This is what is in `element[0].outerHTML`: `
` – Sean Jun 30 '14 at 12:18
@Sean: with this approach, we don't need `transclude`. See my sample code and demo – Khanh TO Jun 30 '14 at 12:21
@Sean: IMO, `transclude` is more suitable for creating reusable `widgets`. Like a dialog to display arbitrary content (With isolate scope, the directive's scope and the transcluded content's scope `are not the same scope`. They are siblings) – Khanh TO Jun 30 '14 at 12:26
@Khanh: ah! Apologies, I see what you have done now. I was just reading your comments and following along and missed the DEMO link. One question - is there a reason you use an attribute instead of an element for the `valid-form-group` container? – Sean Jun 30 '14 at 12:36
@Sean: because using custom elements has problems in IE. I like to use attributes instead. – Khanh TO Jun 30 '14 at 12:38
@Khanh: Thankyou for the help. I'll award the bounty now (before it expires). I will attempt to re-engineer my code accordingly and hope you don't mind if I comment here if I have any further questions on this/ – Sean Jun 30 '14 at 12:41
@Sean: You could see this for more information about problems with IE: https://docs.angularjs.org/guide/ie – Khanh TO Jun 30 '14 at 12:51

score 1 · Answer 2 · answered Jun 22 '14 at 20:48

I can only guess what you are seeing is the result of a double compile during the directives initialization process, that's why you are seeing the double sets of options.

You can solve this by wrapping your compile inside $timeout, which will ensure the compilation happens outside the directive initialization. Here's a working demo and below the directive code:

.directive('validFormGroup', function($compile, $timeout) {
  return {
    restrict: 'E',
    template: '<div><span ng-transclude></span></div>',
    replace: true,
    transclude: true,
    require: '^form',
    link: function(scope, element, attrs, ctrl) {
      if (attrs.required !== undefined) {
        var selectElement = angular.element(element.find('select'));
        $timeout(function(){
          selectElement.attr('ng-required', true);
          $compile(selectElement)(scope);
        });
      }
    }
  };
});

PS You can achieve similar bootstrap wrapper functionality by using isolated scope on your directive and then checking if your transcluded input/select element has the required attribute set. Define a function on the isolated scope to check for error and tie this function to the form-group ng-class has-error. This way you dont have to use $timeout at all.

Thanks Beyers - I'll have to give this a go. Is it possible to explain why a compile outside of directive initialisation would have a different effect? Have a couple of sick kids at home so not sure when I'll be able to check this out - but will accept your answer once tested. — Sean, Jun 23 '14 at 09:36

score 1 · Answer 3 · 2014-06-29T08:07:26.490

1

I would like to suggest here a different approach, which i adapted for having dynamic validation. adding validations dynamically to the field, reduces boilerplate html code for each field, i have written a directive for similar purpose. please see the plunker link for example directive... PLUNKER

i have written such directives for all types of fields: number, text, select, textarea, bool, datepicker, etc... the attached plunker gives you an example for text & number field.

the magic of angular happens using below liner:

  var newElem = angular.element(template);
  element.replaceWith(newElem);
  $compile(newElem)(scope);

all other code is just some logical if else part..

edited Jun 29 '14 at 08:07

answered Jun 29 '14 at 07:22

Hi algos, I like the way you manage your dynamic validation, and that is similar to what I am trying to achieve myself. I posted a basic sample of my exact problem though - and that is when you have a `select` element involved. Have you tried dynamic validation on a `select` element that is bound to some `scope` collection? As per the above, I find that the compile statement (that you also use) doubles up the items in the collection. – Sean Jun 30 '14 at 09:30
yes i have dynamic validations on select as well, though only ng-required as others are not applicable. also what i am doing is created a new element and replacing it, so it doesn't cause the duplicate attribute problem – Jul 01 '14 at 04:25

score 0 · Answer 4 · edited May 23 '17 at 11:59

You not need to use $compile in this case. I just changed the code to solve your problem. I try to keep as near as possible to your original version to help you understand.

Javascript (added isRequired scope variable based on attrs.required)

  .directive('validFormGroup', function($compile) {
    return {
      restrict: 'E',
      template: '<div><span ng-transclude></span></div>',
      replace: true,
      transclude: true,
      require: '^form',
      link: function(scope, element, attrs, ctrl) {
        if (attrs.required !== undefined) {
          //added isRequired
          scope.isRequired = true;

          var selectElement = angular.element(element.find('select'));
          // either of the below produce the same results
          //selectElement.attr('ng-required', true);
          //selectElement.attr('required', true);

          // if the below is commented out it wont validate
          // BUT if it is left in it will recompile and add another 3 options
          //remove $compile
          //$compile(selectElement)(scope); 
        }
      }
    };
  });

HTML (added ng-required=isRequired)

<select ng-model="data.option" ng-options="option.id as option.message for option in selectOptions" name="validInfo" id="validInfo" ng-required="isRequired">

You can refer to plunkr version at http://plnkr.co/edit/BGQo05mTNr1H1HjFXSpf?p=preview

I think this answer your question. If you got more complex scenario, please share.

Updated: (after read through others comment and answer again) If you need dynamic HTML content, you can use this solution - Compiling dynamic HTML strings from database

Another way is to remove ng-*attribute to prevent recompile. plunkr version at http://plnkr.co/edit/JpfdvISCZ39heuUfdHt3?p=preview

      selectElement.removeAttr('ng-options');
      selectElement.removeAttr('ng-model');

Hi hutingung - I think you have misunderstood what I am attempting to achieve. What I would like is to use attributes that appear within the `valid-form-group` directive to be applied to the `input` element that is found within the html that is to be transcluded. In other words, if `required` is found on the `valid-form-group` directive, then it should be dynamically added to the `select` control within the samples content. I hope that explains it more clearly. — Sean, Jun 30 '14 at 09:39

score 0 · Answer 5 · answered Jun 29 '14 at 16:15

I don't have a complete answer however if you you give your directive an isolated scope scope: {}, then on the double compile it can't get the options so fails silently - I tried this in your plunkr and I only got one set of options in the drop down.

I said I don't have a compete answer - I don't believe it is - it seems like a hack and I think there are things on the scope that you do need to share with the directive you might be able to inherit these alone via an inherited scope so that you can maintain the functionality but as I said it feels hacky and doesn't feel right because it doesn't address the fundamental problem of how best to handle the double compile.

Compiling dynamic content - AngularJS

5 Answers5

Linked