將web應用程序遷移到angular.js

Question

我正在製作當前正在製作的在線html演示文稿編輯器。最終，我想用角度重新編寫它，最好是逐漸更換應用程序的組件，而不是從頭開始重新構建它。

要開始，我想實現使用角度的新功能。

總之，問題是如何處理只有某些部分正在使用該框架的應用程序的情況？

似乎角應用程序需要通過API接口與應用程序的其餘部分，就好像它的外部實體。

EDIT澄清：

應用類似於功率點與幻燈片縮略圖的堆疊。所選幻燈片內容將加載到可編輯的工作空間中，其中通過菜單將更改應用於所選元素。

我想添加一個音頻功能菜單。這是一種在選定元素上編輯數據屬性的表單。這些數據屬性用於在別處生成html5音頻元素。

如果我生成使用角音頻模塊：

1.納克應用內屬性將必須是工作區和菜單兩者的父元素。

1. 添加/編輯/刪除音頻表單中的輸入控件必須綁定到與選定元素的數據屬性相同的模型。

例如：

<input value="{{loop}}"> 

<div class="element selected" data-audio-loop="{{loop}}"> 

3.當打開音頻形成的角度的應用程序需要知道的所選擇的元件是什麼。

4.只有該元素需要綁定到與表單相同的數據。

步驟3和4是我不確定實施的地方。

如果整個應用程序是以角度建模的，那麼步驟3將很容易，因爲會有一個跟蹤所選元素的模型。

角模塊應該如何知道所選元素是什麼，以便它可以應用其綁定？

編輯：（進一步澄清）

假設我有這些元件，選擇其中只有一個：

<div class="element selected" data-loop="{{loop}}"> 

<div class="element" data-loop="{{loop}}"> 

<div class="element" data-loop="{{loop}}"> 

<div class="element" data-loop="{{loop}}"> 

和該輸入：

<input ng-binding="loop"> 

我怎樣才能使該綁定隻影響選定的元素，而不是所有的元素？

Answer 1

沒有理由不逐漸在你的應用程序介紹角。如果你正在使用JQuery，Angular也會使用它。在不，它會回落到內部的替代jqlite。

正如dabee所說，只有ng-app指令內的代碼在angular的控制下，並且您可以將該標籤放在任何兼容元素（div，ul等）上，而不必繼續身體標記並控制整個頁面。

您可以通過在服務中包裝數據訪問（在任何情況下爲推薦實踐）來封裝與應用程序其餘部分的交互 - 或通過讀取寫入DOM的&。在你需要在通過角的控制之外行動的DOM變化作出反應的情況下，你可能要檢查的NG-ScrollSpy指令的代碼的潛在方法：An AngularJS module for navigation highlighting

延伸閱讀：http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html

響應到最近的更新：

要使指令僅適用於選擇了類的情況，請在指令本身中進行選擇測試。請參閱：How do I apply an AngularJS directive based on a class set by ng-class?特別是，您需要擴展添加所選類的函數 - 它應該更新一個變量，該變量在更新元素時​​可以訪問angularjs代碼（或者觸發您將在指令代碼中處理的事件）。在該變量上創建一個$ watch（或添加一個事件處理程序），並應用dom轉換以根據需要添加或刪除該功能。

Answer 2

只有帶有指令ng-app的標籤內的代碼受到angularJS的控制。因此剩下的代碼可以由任何其他工具來控制。

http://docs.angularjs.org/api/ng.directive:ngApp