AngularJS dynamically adding Directive

Question

To dynamically add Directives into the DOM, one has to use the $compile service. So far so good, but throughout my research on this problem, I couldn't find a similar case to see differences and isolate the problem.

The full code can be seen here: https://plnkr.co/edit/UkncNEGZDFNyamlBgeSI?p=preview

As u can see, the $scope data from 'UploadController' doesn't seem to apply correctly to the 'ProgressDialog' Directive. Except the proportion, it simply won't show the current and maximum MB.

// the compiling stuff is done here
$compile(progress)($scope);
$('#uploadButton').replaceWith(progress)
...

This code sample is out of context. It is part of a File Uploader with Socket.io and NodeJS. I am not that much used to Angular so I struggle with their documentation and its hard-to-read nor understand examples... Hoping for help and thanks in advance!

floor · Accepted Answer · 2017-04-13 01:13:08Z

1

The problem is that you aren't passing current mb and max mb to the progress directive like you are for current value and max value. Set the attributes up in your startUp function. Add those attributes to the progress directive. Then update your template to use those updated attributes. (I changed them name slightly which made it easier to bind to)

in the upload controller:

$scope.startUpload = function() {
   var progress = angular.element(document.createElement('progress-dialog'));
   progress.attr('cur-val', $scope.curVal);
   progress.attr('max-val', $scope.maxVal);
   progress.attr('curmb', $scope.curMB);
   progress.attr('maxmb', $scope.maxMB);

   $compile(progress)($scope);
   $('#uploadButton').replaceWith(progress)
}

In the progress directive:

 scope: {
    curVal: '@',
    maxVal: '@',
    maxmb:  '@',
    curmb:  '@'
  },

And update the progress template:

<span class="text-center">
  <p>{{curVal}}% - {{curmb}}/{{maxmb}} MB</p>
  <div class='progress-bar'>
    <div class='progress-bar-bar'>
    </div>
   </div>
</span>

answered Apr 13, 2017 at 1:13

floor

1,57212 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Armin Bu Over a year ago

This solved it! I actually tried this solution before posting, but i guess i messed up with the spelling max-mb and max-MB

Collectives™ on Stack Overflow

AngularJS dynamically adding Directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related