2013-03-24 87 views
3

更新:小提琴瓦特/完整的解決方案: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做的事情,但在這一點上它更多的是學習如何使用指令比認爲這是一個好主意。

回答

6

您可以通過設置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

+0

哎呀,這麼沒有指令控制器和'ng-transclude',讓我們來看'ng-click'的行爲通常......非常棘手。 – Langdon 2013-03-24 22:16:29

+1

no.directive控制器也可以使用父控制器的範圍。無論你設置「範圍」參數,都是這樣。 'ng-transclude'也不影響範圍。 'transclude'主要用於確定是將新模板中的現有html包裝在新模板中還是將其放棄 – charlietfl 2013-03-24 22:21:00

+0

哦,我想這是事實,我的控制器定義了一個名爲test的函數,然後當我刪除它時,事實上是我有'範圍:{}'文檔所說的創建一個孤立的範圍。這就是我從例子中複製的東西。 :) 謝謝你的幫助。現在有一個文本屬性,我可以使'attrs。$ observe'工作。乾杯! – Langdon 2013-03-24 22:31:11