创建AngularJS指令的jQuery UI按钮(Creating an AngularJS Di

更新：小提琴瓦特/完整的解决方案： http://jsfiddle.net/langdonx/VXBHG/

在努力进行比较和对比KnockoutJS和AngularJS，我通过跑KnockoutJS互动教程，每节之后，我会用什么小我已经知道了+重写它AngularJS AngularJS参考。

当我到步的3 创建自定义绑定的教程，我想这将是让旋转加速对角指令，写一个自定义标签的好时机。然后，我悲惨地失败了。

我要对付的，我一直无法弄清楚两个问题。我创建了一个新的小提琴，试图总结我的头周围发生了什么事情？

1（小提琴）：我想通了，我的范围界定问题，但是，是有可能只是直通ng-click ？我能得到它的工作的唯一方法是其重命名为jqb-click这是一个有点讨厌。
2（小提琴）：只要我申请.button()到我的元素，一切都很怪异。我的猜测是因为两个角和jQuery UI的操纵HTML。我不希望这样，但角似乎提供了自己的span为我的button （见的JavaScript的第21行），当然这样是jQuery UI的，这是我所期望的。我砍死了HTML得到它看的权利，但即使在此之前，没有任何功能的工作原理。我仍然有范围的问题，而且也没有模板绑定。我在想什么？

据我所知，有一个AngularUI项目，我应该可以考虑看看，我大概可以拉过我尝试只用CSS做的，但在这一点上，更多的是学习如何使用指令，而不是认为这是一个很好的理念。

您可以通过设置创建一个指令一个孤立的范围scope参数，或让它通过不设置它使用父范围。

既然你想要的ng-click从父范围很可能最简单的此实例使用指令中父范围：

一个窍门是使用$timeout maniplulatig一个模板指令中的DOM给予DOM时间操作前重新绘制前的指令中，否则似乎元素不及时存在。

我用了一个属性，在通过文本，而不是担心transclusion编译。以这种方式表达将已经被添加模板时编译和link的回调提供方便的属性。

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

angular.module('Components', [])
    .directive('jqbutton', function ($timeout) {
    return {
        restrict: 'E', // says that this directive is only for html elements
        replace: true,        
        template: '<button></button>', 
        link: function (scope, element, attrs) {
            // turn the button into a jQuery button
            $timeout(function () {
                /* set text from attribute of custom tag*/
                element.text(attrs.text).button();
         }, 10);/* very slight delay, even using "0" works*/
        }
    };
});

演示： http://jsfiddle.net/gWjXc/8/

指令是非常强大，但也有一个学习曲线。此外，在角敲除比较，角是更的元框架，从长远来看，具有比敲除得多的flexibilty的

非常有益的阅读理解中的指令范围：

https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance