Skip to content

Instantly share code, notes, and snippets.

@gruber76
Created March 26, 2012 01:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save gruber76/2202107 to your computer and use it in GitHub Desktop.
Save gruber76/2202107 to your computer and use it in GitHub Desktop.
"Simple" break for PIE with AngularJS
<html class="no-js" lang="en" xmlns:ng="http://angularjs.org" ng:app>
<HEAD>
</HEAD>
<BODY>
<ng:include src="'samplePIEtemplate.html'" />
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js"></script>
<script type='text/javascript' src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<script type='text/javascript'>
angular.directive('pie', function () {
return function (elm) {
if (window.PIE) {
PIE.attach(elm[0]);
}
};
});
</script>
</BODY>
<div id="pieFace" style="
-pie-background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(125, 134, 136, 0.3) 10%, rgba(125, 134, 136, 0.3) 60%, rgba(125, 134, 136, 0.6) 80%, rgba(125, 134, 136, 0.8) 100%);
height: 50px;
width: 50px;
" pie=""></div>
@lojjic
Copy link

lojjic commented Mar 26, 2012

I think this "break" is actually due to you trying to apply PIE to a non-element... The 'this' keyword in PIE.attach(this) appears to be pointing to something other than the target div.

See https://gist.github.com/2202558 -- this works without error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment