CODEWITHSUNDEEP
javascriptangularjs
Armin Bu
Armin Bu

Reputation: 1360

AngularJS dynamically adding Directive

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!

Upvotes: 1

Views: 32

Answers (1)

floor
floor

Reputation: 1572

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>

Upvotes: 1

Related Questions