重新启动/重新加载 Angular 应用程序答案

【问题标题】：Restart/reload Angular app重新启动/重新加载 Angular 应用程序
【发布时间】：2015-06-10 07:09:23
【问题描述】：

我正在使用 Yii2 和 Angular 开展一个项目。代码结构如下：

<html ng-app="myApp">

    <head.../>
    <body>
        ...
        <div class="body-content"> MAIN CONTENT GOES HERE </div>
        ...
    </body>

</html>

该页面在左侧包含一个标题和一列，以及在.body-content div 内呈现的中心区域。现在，您可以想象，我在其中有一些按钮，一些其他角度小部件等。

Yii2 有一个非常酷的功能，叫做renderPartial，它可以重新渲染视图文件，而无需再次将其包装在<head> 和<body> 中。我使用它来更新我的主要区域的内容，通过调用该函数，使用 jQuery 获取响应并替换内容。

现在，这会导致与 Angular 绑定的所有按钮停止工作（我猜为什么）。我的问题是：如何让 Angular 重新运行或将我所有的（新）DOM 元素重新绑定到它们的操作？

【问题讨论】：

stackoverflow.com/questions/14994391/…
@adt 不。我不会因为 Angular 无法自行重新加载而重写 Yii 提供给我的所有小部件。

标签： javascript jquery html angularjs

【解决方案1】：

您将不得不使用手动引导方式（在https://docs.angularjs.org/guide/bootstrap 中解释）用于角度，但这样做会随着时间的推移导致内存泄漏，因为 DOM 上的角度添加侦听器被您破坏并且不知道它被删除，所以他们保持不变，控制器/指令/绑定和代码引用的其他功能也是如此。

yii2 可以包装成角度指令吗？

【讨论】：

不太确定这将如何工作。是的，我可以在指令中包含我想要的任何内容，但那会做什么呢？还是您的意思是将body-content 的全部内容包装在一个指令中？
我对 yii2 框架了解不多，但我认为它是一个 javascript 库，您可以使用某些模板指定要渲染的内容，您可以在 angular 中注册一个指令来替换 body-content 并渲染yii2 框架的内部正常，您可以像 stackoverflow.com/questions/22080351/… 中解释的那样重新渲染 angular 指令，并且 angular 会负责分析 html 属性并做到这一点。
@VladTheLad 感谢您注意到 Yii2 是一个后端渲染框架，这比我预期的更矛盾。最好选择一个或另一个，否则你会走一条非常困难和笨拙的道路来完成这项工作。也许 Yii2 可以渲染应用程序中使用的角度模板

【解决方案2】：

我不确定我是否正确 - 您使用前端框架和后端框架来控制前端，后者提供您注入 HTML 的新 DOM 内容？

据我所知，Angular 在获取数据（无论是从后端以 JSON 还是您选择的其他格式）的同时处理所有事情都是最好的，而不是新的 DOM 元素。

Angular 本身绑定到它添加到的任何 DOM 节点，处理内容和依赖注入，从而显示您的数据。在您的情况下，后端 PHP 框架似乎提交了新的 DOM 元素，Angular 认为“嘿-您不希望我添加它们？好吧，那我不添加。”和休息。

也许有针对这种特定情况的解决方案，但如果我是你，我会重新考虑“我希望我的视图/模板在哪里呈现？整体的哪一部分负责什么？”这一概念。使用两种不同的框架（更不用说语言）来完成相同的工作并相互干扰会造成我不想清理的混乱。

所以，如果你喜欢这个 Yii2 功能并想让它工作，那很好 - 但在这种情况下 - 你需要 angular 做什么？如果你宁愿坚持使用 Angular，你只需要一个后端来处理数据并将其交还给前端来完成它的工作。

【讨论】：

我使用 Yii2 处理大部分内容，使用 Angular 处理一些边缘情况，在这些情况下，使用 Angular 而不是使用 Yii2 更容易控制用户。我这样做是因为它更快更容易（不要忘记 Angular 仍然是 DIY 有大量指令，而 Yii2 有大量现成的东西）。
嗯，在这种情况下，我仍然很确定如果没有 Angular，你会更好（据我所知，React 可能是你最好的候选人，但还没有使用它）——如果输入控制是什么您寻求，成熟的 MVVC 可能不是最佳选择。 ;)