Of late I have been deep in Angular land and I just thought I’d share a little discovery that I was shown by a fellow work college (@dylanFM) the other day.
It’s nothing mind boggling but if you prefer to work with your SVGs inline and are a little OCD in the way your code looks you might enjoy this tip.
So Angular has a handy built-in directive called “ngInclude” and funnily enough, it can include stuff.
Fetches, compiles and includes an external HTML fragment.
Utilising ngInclude means that we can do away with having the full SVG source polluting our template files and just reference them like so:
<div ng-include="'assets/your.svg'"></div>
Note – Be sure to wrap your image path in single quotes, e.g. src=”‘assets/your.svg'”.
And Angular will do its magic and output the SVG inline like so:
<div ng-include="'assets/your.svg'" class="ng-scope">
<svg>
...
</svg>
</div>High five to clean templates files!
That’s that ultimate goal in web design, but i thought data-sets in html are supposed to be used in conjunction with a js file to read those attributes?
This is amazing, makes your life easier as a web designer, thanks a lot
Users should know that ng-include and SVGs don’t work in Safari:
angular/angular.js: Issue #5263
angular/angular.js: Issue #7538
That second issue has a posted fix, but doesn’t look like it has been merged to Angular core.
Another possibility might be to use a directive instead of ng-include:
http://jasonwritescode.blogspot.ca/2015/03/instead-of-ng-include-try-angularjs.html
Sorry, those Github links are:
https://github.com/angular/angular.js/issues/5263
https://github.com/angular/angular.js/issues/7538
Sorry for the confusion – looks like that fix was committed to the angular core and everything does now work as expected. The issue I was having in Safari was completely unrelated to this 🙂
Hey guys!
Like this technique. As you all know, one of the great things about svg graphics is that you can re-size them. Is it possible to add a size variable to ng-include?