2

I have a site with many partials, one of which has nested ng-repeats that render input forms with rounded corners. In IE, only in this nested repeat case, there's a generic PIE error in the IE console, and it looks like the raw template (ng-show not working, internationalization not working) is being dropped onto the page in addition to all of the expected DOM. It makes me think that the PIE script is running before Angular is done its work.

Is there any sort of best practices for making PIE.htc work well with Angular? Or is there a better solution?

Jim Cote
  • 1,746
  • 3
  • 15
  • 26

1 Answers1

4

Well, you're going to want to use the PIE.js version of PIE.

From there it should be something simple, like creating a directive that applies PIE to the element required:

app.directive('applyPie', function() {
   return {
      restrict: 'A',
      link: function(scope, elem, attr) {
         PIE.attach(elem[0]);      
      }
   }
});

Then you'd use it like this:

<div class="rounded" apply-pie>Wee! I'm rounded</div>
Ben Lesh
  • 107,825
  • 47
  • 247
  • 232
  • When I do the above, IE8 is dumping the following error into its console: TypeError: 'undefined' is null or not an object
     – Jim Cote Jan 18 '13 at 15:23
  • Do you have a fiddle or plnkr.co? It's hard to say what that means when I have no idea where it's erroring or in what context. – Ben Lesh Jan 18 '13 at 15:47
  • I'm putting logging into the library. It seems "el.currentStyle" is undefined in init(). – Jim Cote Jan 18 '13 at 16:00
  • 1
    You could always delay that attach with a setTimeout. It's a little bit of a hack, but hey, so is PIE. ;) – Ben Lesh Jan 18 '13 at 16:06
  • 2
    Isn't elem a jQuery object? I think you need the html element, elem[0] might do it. – Neil Jan 18 '13 at 18:04
  • +1 @Neil is correct (sort of)... elem is a jqLite object if jQuery isn't present when angular.js is processed, otherwise it's a jQuery object. – Ben Lesh Jan 18 '13 at 19:02