Skip to content

Instantly share code, notes, and snippets.

@macton macton/00_webapp_tips.txt
Last active Jul 18, 2019

Embed
What would you like to do?
random webapp tips
Cross-domain file load in jsfiddle
http://jsfiddle.net/jgpSy/
------------------------------------------------
Using jquery.treeview + angular.js
- Dynamically loading json description of tree
- Building DOM with angular
- Calling $.treeview after DOM contructed.
500 items: http://jsfiddle.net/eaq2V/
5000 items: http://jsfiddle.net/Qkh9y/
500 items (embedded data): http://jsfiddle.net/JZcHE/
5000 items (embedded data): http://jsfiddle.net/nA36Z/
------------------------------------------------
// <ig-compile-template ig-source="sourceToWatch" ig-template-url="/path/to/template.html" ig-on-ready="expression to eval after dom created. Given( elem, $scope )" ig-helper="AnyHelperObjectYouWantInScope">
// </ig-compile-template>
//
// e.g.
// <ig-compile-template ig-template-url="templates/banksTree.html" ig-source="source" ig-on-ready="elem.treeview({ collapsed: true, persist: 'location' });"></ig-compile-template>
//
// AngularJS custom directives
// AngularJS - Custom Components Part 1 http://www.youtube.com/watch?v=A6wq16Ow5Ec
// AngularJS - Custom Components Part 2 http://www.youtube.com/watch?v=nKJDHnXaKTY
// Example of attribute directive http://jsfiddle.net/simpulton/5gWjY/
var m_module = angular.module('igCompileTemplate', []);
m_module.directive('igCompileTemplate', [ '$compile', '$http', '$templateCache', '$timeout', function( $compile, $http, $templateCache, $timeout ) {
return {
restrict: 'E',
scope: {
source: '=igSource',
helper: '=igHelper',
onReady: '&igOnReady'
},
link: function($scope, elem, attr) {
$scope.$watch( 'source', function() { // When 'source' changes, ...
$http.get( attr.igTemplateUrl,{ cache: $templateCache } ) // Get the template (from the cache, if possible.); See: https://github.com/angular/angular.js/issues/1039#issuecomment-10673465
.success( function(html) { // Once the template is loaded, ...
var tree = $compile( html )( $scope ); // Compile the template, store in tree. (Note: Angular DOM insertion not done yet.); See: http://jsfiddle.net/wXZL7/1/
elem.html( tree ); // Add the tree to the directive element
window.requestAnimationFrame( function() { // Wait (a single round) for DOM insertion; See: http://stackoverflow.com/a/12243086
$scope.onReady( { elem: elem, $scope: $scope } ); //
}); //
}); //
}, true); // Compare 'source' for equality (not reference); See: http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch
}
};
}]);
function getXML( url, success ) {
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + '&format=xml&callback=?';
$.getJSON(yql, function(data) {
if (data.results[0]) {
success( $.xml2json(data.results[0]) );
}
});
}
function getJSON( url, success ) {
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from json where url="' + url + '"') + '&format=json&callback=?';
$.getJSON(yql, function(data) {
if (data.query.results.json) {
success( data.query.results.json );
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.