lundi 6 juillet 2015

Compile nested directives within unit test in Angular

I have a nested custom directive within the template of a custom directive. Something like:

customDirective definition

<custom-directive></custom-directive>

customDirective.js

angular.module('example')
   .directive('customDirective', function() {
      return {
         restrict: 'E',
         replace: true,
         transclude: true,
         templateUrl: 'directives/customDirective.html'
         link: function(scope, element, attrs) {}
      };
   });

Inside 'directives/customDirective.html

<div class="customDirective">
    <!-- do a bunch of stuff-->

    <!-- but wait, i have an image with a custom-fallback-src directive -->
    <img src="image.jpg" custom-fallback-src='newImage.jpg' />
</div>

customFallbackSrc.js directive

angular.module('example')
   .directive('customFallbackSrc', function() {
      return {
         restrict: 'A',
         link: function(scope, element, attrs) {

           // if image throws an error, use fallback image
           element.bind('error', function() {
              attrs.$set('src', attrs.customFallbackSrc);
           });

         }
      };
   });

Within my unit test for customDirective, how can I properly compile the directive to include any nested directives?

Aucun commentaire:

Enregistrer un commentaire