为jQuery UI Button创建AngularJS指令

Question

更新:小提琴w /完整解决方案:http://jsfiddle.net/langdonx/VXBHG/

---

为了比较和对比KnockoutJS和AngularJS,我浏览了KnockoutJS交互式教程,在每个部分之后,我将使用我已经知道的少量AngularJS参考在AngularJS中重写它.

当我进入创建自定义绑定教程的第3步时,我认为现在是开始使用Angular Directive并编写自定义标记的好时机.然后我悲惨地失败了.

我遇到了两个我无法弄清楚的问题.我创造了一个新的小提琴试图围绕正在发生的事情...

• 1(小提琴):我想出了我的范围问题,但是,它是否可能只是直通ng-click？我可以让它工作的唯一方法是重命名它jqb-click 有点烦人.
• 2(小提琴):一旦我申请.button()我的元素,事情变得奇怪.我的猜测是因为Angular和jQuery UI都在操纵HTML.我不希望这样,但Angular似乎span为我提供了它自己button(参见JavaScript的第21行),当然jQuery UI也是如此,我期望它.我修改了HTML以使其看起来正确,但即使在此之前,这些功能都不起作用.我仍然有范围问题,并且没有模板绑定.我错过了什么？

我知道有一个AngularUI项目我应该看一看,我可以完成我只想用CSS做的事情,但此时它更多的是学习如何使用指令而不是认为这是一个好的理念.

Answer 1

您可以通过设置scope参数在指令中创建隔离范围,或者通过不设置它来使用父范围.

由于您需要ng-click来自父作用域,因此该实例最容易在指令中使用父作用域:

一个技巧是$timeout在一个指令中使用,然后在模板化指令中操纵DOM,以便在操作之前给DOM重新绘制时间,否则看起来这些元素不会及时存在.

我使用了一个属性来传递文本,而不是担心翻译编译.通过这种方式,表达式将在添加模板时进行编译,并且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/

指令非常强大,但也有一点学习曲线.同样在角度与击倒的比较中,角度更像是一个元框架,从长远来看,它比击倒更具弹性.

非常有用的阅读理解范围:

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