Question

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

为了比较和对比KnockoutJS和AngularJS，我浏览了KnockoutJS interactive tutorial，在每个部分之后，我使用我已经知道的AngularJS reference来重写它在AngularJS中。< / p>

当我进入Creating custom bindings教程的第3步时，我认为现在是开始使用Angular Directive并编写自定义标签的好时机。然后我悲惨地失败了。

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

1 （fiddle）：我发现了我的范围问题，但是，是否可以直接通过ng-click？我可以让它工作的唯一方法是将其重命名为jqb-click，这有点烦人。
2 （fiddle）：一旦我将.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

为jQuery UI Button创建AngularJS指令

1 个答案: