javascript - 有 Angular 。 AJAX 请求后启动新的 Angular Directive(指令)

Question

请帮帮我。我有一些 JS 代码，可以使用 LEAFLET map 。 https://gist.github.com/russtanevich/140235d5456c3215df6ac8b788485ad0

该应用程序允许在 map 上添加新广告，当我们点击标记时 - 我们会看到有关广告的信息。我们可以选择某个类别或者在广告文本中包含一些作品作为过滤器。所有过滤器都通过 ajax 请求工作(第 51-81 行)。各种ajax请求各种类型的过滤器。AJAX 请求后，我们更改 $scope.mapMarkers(第 13、54、61 行等)。好的。mapMarkers 是包含标记对象数组的变量(如第 86 行)。好的。标记对象有一条弹出消息(如图所示)。此消息是 Angular 指令(第 96 行，第 5 行)。

我们在第一次加载应用程序后得到的标记有一个很好的弹出消息( Angular Directive(指令)启动)。我们在过滤 AJAX 请求后得到的标记 - 也有弹出消息作为 Angular Directive(指令)。但这是逻辑上的——它们没有表现出来。我们有空的弹出消息，因为 Angular Directive(指令)在这种情况下不会启动。

我希望我们能理解我。也许我解释得不好。我的错误是什么？建筑学？或者也许有解决方案？

非常感谢!祝你今天过得愉快!谨致问候!

Answer 1

好吧，我还没有查看模块“传单指令”，​​但这就是我在类似应用程序上处理它的方式。我创建了一个指令

app.directive('theDirective', function($compile, $timeout){
  return {
    restrict:'E',
    templateUrl: 'template.html' 
  };
});

在我的例子中，我使用 templateUrl ，我在其他地方使用 <script> 启动它像标签一样，该部分将类似于您在 geodataToMarkers 中尝试执行的操作只是您编写模板的方式不起作用，因为 Angular 无法告诉它它是一个模板。

现在，当您添加标记时，您需要使用模型中的内容填充模板，这意味着您必须将它们连接在一起。你可以这么做通过注入(inject) $compile到一个方法并将两者联系在一起

 $compile(domElem)($scope);

这将用模型填充您的指令。 注意，您应该向 domHtml 传递指令而不是 html 含义 <the-directive></the-directive>

很难用你的代码来解释，因为你混合了 jquery 和 Angular，并且你必须改变很多东西。但要明确可能的快速解决方案

当你想把东西放在一起时，你必须在标记上放置一个 id='yourmarker' 的 div，只需查找具有该 id 的元素

 var domElem = document.getElementById(markerPointerId);
          domElem.innerHTML = '<the-directive></the-directive>';

插入您的指令。并编译它

$compile(domElem)($scope);

您应该看到您的标记已填充您所输入的范围。这绝对不是 Angular 的方式。我只是给你一个我知道有效的解决方案

希望有帮助。