的jQuery UI按钮创建AngularJS指令

更新：小提琴瓦特/完整的解决方案：http://jsfiddle.net/langdonx/VXBHG/的jQuery UI按钮创建AngularJS指令

在努力进行比较和对比KnockoutJS和AngularJS，我通过KnockoutJS interactive tutorial跑去，每个部分后，我会用AngularJS重写它，使用我已经知道的那些+ AngularJS reference。

当我到达Creating custom bindings教程的第3步时，我觉得现在是开始使用Angular Directives并编写自定义标签的好时机。然后我失败了。

我遇到了两个我一直未能弄清楚的问题。我创建了一个新的小提琴，试图总结我的周围发生了什么事情......头

（fiddle）：我想通了，我的范围界定问题，但是，是有可能只是直通ng-click？唯一能让它起作用的方法是将其重命名为jqb-click，这有点烦人。
（fiddle）：只要我将.button()应用于我的元素，事情就变得很奇怪。我的猜测是因为Angular和jQuery UI都在操纵HTML。我不希望这样，但Angular似乎为我的button（请参见JavaScript的第21行）提供了自己的span，当然我也希望jQuery UI也是如此。为了让它看起来正确，我篡改了HTML，但在此之前，没有任何功能可行。我仍然有范围问题，并且没有模板绑定。我错过了什么？

据我所知，有一个AngularUI项目我应该看看，我可以拉下我想用CSS做的事情，但在这一点上它更多的是学习如何使用指令比认为这是一个好主意。

来源

2013-03-24 Langdon

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

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

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

我使用了一个属性来传递文本，而不用担心跨越式编译。以这种方式，表达式在添加模板时已经被编译，并且回调提供了对属性的简单访问。

<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

来源

2013-03-24 21:50:34 charlietfl

哎呀，这么没有指令控制器和'ng-transclude'，让我们来看'ng-click'的行为通常......非常棘手。 – Langdon 2013-03-24 22:16:29

no.directive控制器也可以使用父控制器的范围。无论你设置“范围”参数，都是这样。 'ng-transclude'也不影响范围。 'transclude'主要用于确定是将新模板中的现有html包装在新模板中还是将其放弃 – charlietfl 2013-03-24 22:21:00

哦，我想这是事实，我的控制器定义了一个名为test的函数，然后当我删除它时，事实上是我有'范围：{}'文档所说的创建一个孤立的范围。这就是我从例子中复制的东西。：）谢谢你的帮助。现在有一个文本属性，我可以使'attrs。$ observe'工作。干杯! – Langdon 2013-03-24 22:31:11

的jQuery UI按钮创建AngularJS指令

回答

相关问题