为jQuery UI按钮创建AngularJS指令

更新：带完整解决方案的小提琴：

---

为了比较和对比KnockoutJS和AngularJS，我浏览了，在每一节之后，我都用AngularJS重写了它，使用了我所知甚少的内容

当我进入本教程的第3步时，我想这将是一个很好的时机来开始使用Angular指令并编写自定义标记。然后我惨败了

我遇到了两个我还没有弄清楚的问题。我创造了一个新的小提琴，试图把我的头围绕在正在发生的事情上

• 1（）：我已经解决了范围问题，但是，是否可以直接通过

  ng单击
  ？我能让它工作的唯一方法是将它重命名为
  jqb click
  ，这有点烦人

• 2（）：我一将

  .button（）

  应用到我的元素，事情就变得很奇怪。我猜是因为Angular和jQueryUI都在操作HTML。我不希望出现这种情况，但Angular似乎为我的

  按钮
  （参见JavaScript的第21行）提供了自己的
  span
  ，当然，我希望jQuery UI也是如此。我对HTML进行了黑客攻击以使其看起来正确，但即使在此之前，所有功能都不起作用。我仍然存在范围问题，并且没有模板绑定。我错过了什么

---

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

您可以通过设置

scope

参数在指令中创建一个独立的作用域，或者让它通过不设置父范围来使用父范围

由于您希望从父范围单击

ng

，因此此实例可能最容易在指令中使用父范围：

一个技巧是在一个指令中使用

$timeout

，然后在一个模板化指令中操纵DOM，以便在操作之前给DOM重新绘制的时间，否则元素似乎不存在

我使用了一个属性来传递文本，而不用担心转换编译。以这种方式，当添加模板时，表达式已经被编译，并且

链接

回调提供了对属性的轻松访问

角度模块（'组件'，[]） .directive（'jqbutton'，函数（$timeout）{ 返回{ restrict:'E'，//表示此指令仅适用于html元素 替换：正确， 模板：“”， 链接：函数（范围、元素、属性）{ //将该按钮转换为jQuery按钮 $timeout（函数（）{ /*从自定义标记的属性设置文本*/ element.text（attrs.text）.button（）； }，10）；/*非常轻微的延迟，即使使用“0”也有效*/ } }; }); 演示：

指令非常强大，但也有一点学习曲线。同样，与angular和knockout相比，angular更像是一个元框架，从长远来看，它比knockout灵活得多

非常有助于理解指令中的范围：

---

Argh，因此，由于没有指令控制器和

ng transclude

，让我们来看看

ng click

是否正常操作。。。棘手的。没有。指令控制器也可以使用父控制器的作用域。这一切都取决于您是否设置了

scope

param<代码>ng transclude也不会影响范围

transclude

本质上是用于确定是将现有html包装到新模板中的标记中，还是放弃它。我猜这是因为我的控制器定义了一个名为test的函数，然后当我删除该函数时，事实上我有

scope:{}

，文档说它创建了一个独立的作用域。这就是我从示例中复制得到的结果。：）谢谢你的帮助。现在有了一个文本属性，我可以让

attrs.$observe

工作了。干杯@charlieftl您说过“最容易使用父范围”。这是否意味着，如果我定义自己的范围，这肯定是可能的？我已经回到使用作用域来禁用ng以通过，但现在我无法让我的ng单击通过。介意看一下吗？可以这样做

ng click=“$parent.test（4）”

但是如果将它嵌套在其他指令中，例如

ng repeat

可能会很难跟踪

$parent

是什么