Creating an AngularJS Directive for jQuery UI Button -

update: fiddle w/ full solution: http://jsfiddle.net/langdonx/vxbhg/

---

in efforts compare , contrast knockoutjs , angularjs, ran through knockoutjs interactive tutorial, , after each section, i'd rewrite in angularjs using little knew + angularjs reference.

when got step 3 of creating custom bindings tutorial, figured time spun on angular directives , write custom tag. failed miserably.

i'm against 2 issues haven't been able figure out. created new fiddle try , wrap head around going on...

• 1 (fiddle): figured out scoping issue, but, possible passthrough ng-click? way work rename jqb-click little annoying.
• 2 (fiddle): applied .button() element, things went weird. guess because both angular , jquery ui manipulating html. wouldn't expect this, angular seems providing own span button (see line 21 of javascript), , of course jquery ui, expect. hacked html looking right, before that, none of functionality works. still have scope issue, , there's no template binding. missing?

i understand there's angularui project should taking @ , can pull off i'm trying css, @ point it's more learning how use directives rather thinking idea.

you can create isolated scope in directive setting scope parameter, or let use parent scope not setting it.

since want ng-click parent scope easiest instance use parent scope within directive:

one trick use $timeout within directive before maniplulatig dom within templated directive give dom time repaint before manipulation, otherwise seems elements don't exist in time.

i used attribute pass text in, rather worrying transclusion compiling. in manner expression have been compiled when template added , link callback provides easy access attributes.

<jqbutton ng-click="test(3)" text="{{title}} 3"></jqbutton> 

angular.module('components', [])     .directive('jqbutton', function ($timeout) {     return {         restrict: 'e', // says directive html elements         replace: true,                 template: '<button></button>',          link: function (scope, element, attrs) {             // turn button jquery button             $timeout(function () {                 /* set text attribute of custom tag*/                 element.text(attrs.text).button();          }, 10);/* slight delay, using "0" works*/         }     }; }); 

demo: http://jsfiddle.net/gwjxc/8/

directives powerful, have bit of learning curve. in comparison of angular knockout, angular more of meta framework in long run has far more flexibilty knockout

very helpful reading understanding scope in directives:

https://github.com/angular/angular.js/wiki/the-nuances-of-scope-prototypal-inheritance