如何整合用JQuery編寫的現有模態框架？

我們已經爲我們的用戶界面購買了一些CSS。它包括標籤，嚮導和模式等內容。該模板通常使用JQuery來進行渲染。我所讀到的關於角度的所有幫助都不鼓勵JQuery，我們應該嘗試以角度來做。不幸的是，這是第三方工具，我們的團隊被出售。如何整合用JQuery編寫的現有模態框架？

我們有很多顯示網格的屏幕。該網頁包含一個「添加新」按鈕和一個「編輯」按鈕，用於網格上顯示的每一行。當用戶點擊「添加新的」按鈕時，我們需要顯示一個模式，允許他捕捉新的實體（不管它是什麼）。當用戶點擊「編輯」時，它會打開一個類似的模式並填充字段。

模式需要打開一些JQuery調用他的插件。我是否可以在控制器中使用帶有角度的JQuery，以便我可以打開主題的模式。 我只會爲此提供JQuery。對於其餘的我會盡可能堅持角度的方式。

來源

2013-08-26 uriDium

沒有人會阻止你在任何地方使用jquery :)即使它可以由於AngularJS和jquery同時進行DOM操作而產生副作用:)。理解指令，他們將充當你的jQuery和角度模型之間的橋樑。 – Chandermani

在角UI他們給了規定，你可以檢查（jQuery的直通 - 調用元素上指定的jQuery函數或插件）@http://angular-ui.github.io/ui-utils/

在他們已經展示瞭如何調用引導提示，幾乎沒有工作

來源

2013-08-26 10:44:13

這很好用，如果沒有很多額外的參數，不幸的是不是我們的情況。我們的情況需要相當多的時間，包括指定按鈕和回調。 – uriDium

編寫您的自定義指令，在指令範圍內發送每行的數據，並在您的指令中調用jQuery函數。

我在實際項目中

UPD

'use strict'; 

angular.module('yourApp') 
.directive('directiveName', function ($parse) { 
    return { 
     restrict: 'E', 
     scope: { params: '=' }, 
     template: '<div></div>', 
     replace: true, 
     transclude: true, 
     link: function ($scope, element, attrs) { 

      var model = $scope.params, 
       options = model.getData(), 
       out; 

      var ms = element.magicSuggest({  //I use jQuery function magicSuggest 
       //some params for jQuery function 
      }); 

      $(ms).on('selectionchange', function (event, combo, selection) { 
       //use events with my element 
      }); 

     } 
    } 
});

來源

2013-08-26 10:50:18

你沒有這個例子嗎？ – uriDium

首先，用這種方式，它不禁止使用jQuery與AngularJS。強烈建議您儘可能小心地使用它，因爲您將失去一些通常不需要編碼的數據綁定和事件功能。

當您使用第三方時，您有三種選擇。

您可以使用已經存在像一個自舉的橋樑：（http://angular-ui.github.io/bootstrap/）
你可以建立一個橋樑，你的第三方插件和AngularJS之間需要什麼using指令，手錶，事件並確保在適當的地方撥打scope.$apply()。舉個例子：

<div data-modal title="Header">Content</div>

能自動調用$(element).modal()創建模式，如果你想簡化應用模板的HTML。
當您需要使用第三方時，您可以停止給該死的人打電話scope.$apply()。這對你來說可能不是最好的解決方案，也不是長期的，但如果你沒有時間寫橋或者你永遠不會重用它，那不是世界末日。

第三個選項總是存在，但不要使用它，除非你別無選擇。開發一個簡單的指令並添加特徵是最好的方法，除非已經編碼了一些固體。當你習慣它時，它非常容易。

來源

2013-08-26 11:23:39

我認爲寫我自己的指令可能是一條路。我會給它一個鏡頭。感謝 – uriDium

對於選項＃2 +1（在需要的地方編寫自己的指令）。 –

也許有一天，我們將有一種方式與jQuery插件進行交互，而無需創建自己的指令。一個可以讀取jQuery插件的指令，只需要它。這將成爲AngularJS的遊戲改變者，因爲jQuery插件非常豐富，AngularJS還很年輕。 –

如何整合用JQuery編寫的現有模態框架？

回答

相關問題