Question

我正在制作一个目前正在制作的在线html演示编辑器。最后，我想用angular重写它，最好是逐渐替换应用程序的组件，而不是从头开始重建它。

要开始，我想使用angular实现新功能。

总之，问题是如何处理只有某些部分使用框架的应用程序的情况？

似乎角度应用程序需要通过api与应用程序的其余部分连接，就好像它是一个外部实体。

编辑澄清：

应用程序类似于带有一叠幻灯片缩略图的power-point。选定的幻灯片内容将加载到可编辑的工作区中，通过菜单将更改应用于所选元素。

我想在菜单中添加音频功能。它是一个编辑所选元素上的数据属性的表单。这些数据属性用于在别处生成html5音频元素。

如果我使用angular：

构建音频模块

1. ng-app属性必须位于工作区和菜单的父元素上。

添加/编辑/删除音频表单中的输入控件必须绑定到与所选元素的数据属性相同的模型。

示例：

<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

没有理由不在您的应用中逐步引入Angular。如果您当前正在使用JQuery，Angular也会使用它。否则，它将依赖内部替代jqlite。

正如dabee所说，只有指令ng-app中的代码处于角度控制之下，你可以将该标签放在任何兼容的元素（div，ul等）上，它不需要在身体上标记并控制整个页面。

您可以通过将数据访问包装在服务中（在任何情况下都是推荐的做法） - 或者通过阅读和放大，来封装与应用程序其余部分的交互。写给DOM。如果您需要通过angular的控制之外的操作来响应DOM中的更改，您可能需要检查ng-ScrollSpy指令的代码以获取潜在的方法：An AngularJS module for navigation highlighting

进一步阅读：http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html

回应最近的更新：

要使指令仅在选择类时应用，请在指令本身中测试select。请参阅：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

将Web应用程序应用程序迁移到angular.js

2 个答案: