从外部非Angular插件

时间:2015-10-27 07:11:04

标签: javascript angularjs external medium-editor

我有一个Angular SPA,但在其中我使用了一些非角度库(媒体编辑器[ME from now on])。我为ME创建了一个指令,所以如果我在我的视图中添加contenteditable元素,我就可以实例化并正常工作。所以这不是问题。

问题是我还创建了一个特殊的ME扩展,它需要向我的服务器发出Web请求,以便将正确的标记插入到ME的可编辑元素中。但是要做出这些请求,它需要一些视图模型的数据并将其传回:

  • 需要读取和设置(未定义时)我的视图模型ID
  • 它需要不断地操纵其他一些视图模型值,以便我的SPA知道它仍在处理,以便其他进程被推迟

我认为我只需在我的网页上添加input type="hidden" ng-model="..."并更改其值并触发输入事件,以便Angular更新其模型。隐藏的输入当然不起作用。所以我将其更改为input type="text" class="hidden"并保留了功能。

这确实有效,但它似乎不是正确的做事方式,因为它是黑客。这主要适用于模型价值交换(获取/设置)。如果我必须调用一些控制器功能怎么样?这甚至是遥远的吗?

我不想让我的扩展以任何方式依赖Angular库,因为它必须是纯粹的ME扩展,并且应该在非Angular SPA中重用(可能是其他一些lib SPA或者只是纯粹简单的DHTML网络应用程序)。但我希望它可以在SPA中使用,以及ME可以很容易地用来操作一些元素的标记,可以设置为通过指令查看模型。

从Angular原生的外部库中与Angular app进行通信的正确方法是什么?

其他信息

基本上我想在自定义扩展中有4个函数,它们应该以某种方式访问​​(和操作)我的Angular视图模型:

  • getReferenceId()setReferenceId(id)
  • incrementPending()decrementPending()

待处理的计数器可以公开曝光并由我的Angular SPA访问,因此它不会处理数据,而扩展程序仍然在做自己的事情。但SPA对何时设置引用ID没有任何权限,因此扩展名会正确读取它...

1 个答案:

答案 0 :(得分:0)

这通常通过在ng服务和指令中包装外部插件(或其部件)来解决。您不需要输入标记,只需将数据放在作用域上,然后从非ng代码调用$scope.$digest进行更改。如果您需要关注数据更改以触发外部库中的内容,则可以使用ng-change$scope.$watch