3

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

为了比较和对比 KnockoutJS 和 AngularJS，我浏览了KnockoutJS 交互式教程，在每个部分之后，我会使用我已经知道的一点点 + AngularJS 参考在 AngularJS 中重写它。

当我进入创建自定义绑定教程的第 3 步时，我认为现在是开始学习 Angular 指令并编写自定义标签的好时机。然后我惨败。

我遇到了两个我无法弄清楚的问题。我创建了一个新的 Fiddle 来尝试了解正在发生的事情......

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

我知道有一个 AngularUI 项目我应该看一下，我可能会用 CSS 完成我想要做的事情，但在这一点上，更多的是学习如何使用指令而不是认为这是一个好的主意。

4

1 回答 1

6

您可以通过设置参数在指令中创建隔离作用域scope，或者通过不设置使其使用父作用域。

由于您想要ng-clickfrom 父范围，因此此实例可能最容易在指令中使用父范围：

一个技巧是$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/

指令非常强大，但也有一些学习曲线。此外，与 Angular 与淘汰赛相比，Angular 更像是一个元框架，从长远来看，它比淘汰赛具有更大的灵活性

对于理解指令范围非常有帮助：

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

于 2013-03-24T21:50:34.037 回答