在 Angular.JS 开发中，我们可能会遇到这样的情况：多个视图需要共享同一个控制器，并且这些视图之间可以相互切换。然而，当我们在不同的视图之间切换时，我们可能会遇到一个问题：模型数据被重置了。
问题描述
考虑以下代码：
---- -----------------------------
------ --------------- --
------- ------------------------------ -------------
------
--------
----------------------- ---
--------------------------- ---------------- -
----------- - ------ -------
----------------- - ---------- -
-- --------
--
---
---------在这个例子中，我们有一个控制器 MyController，它包含一个输入框和一个按钮。当我们点击按钮时，该控制器应该切换到另一个视图。但是，当我们从一个视图切换到另一个视图时，输入框中的值将被重置为默认值。
问题原因
这个问题的原因是，当我们在不同的视图之间切换时，Angular.JS 会重新编译视图。由于每个视图都有自己的作用域，因此当一个新的视图被编译时，它会创建一个新的作用域和控制器实例。这意味着，当我们从一个视图切换到另一个视图时，旧的作用域和控制器实例将被销毁，而新的作用域和控制器实例将被创建。
在上面的例子中，当我们从一个视图切换到另一个视图时，MyController 的作用域和实例都被重新创建了。因此，输入框中的值被重置为默认值。
解决方案
要解决这个问题，我们可以使用 Angular.JS 的服务来共享数据。服务是 Angular.JS 中一个非常强大的特性，它允许我们在应用程序中共享数据、方法和状态等信息。
以下是一个使用服务来共享数据的示例：
---- -----------------------------
------ --------------------------- --
------- ------------------------------ -------------
------
--------
----------------------- ---
--------------------------- ---------------- ------------ -
------------------ - ------------
------------------------------ --------
----------------- - ---------- -
-- --------
--
--
----------------------- ---------- -
--- ---- - ---
------ -
----- --------------- -
---- - ------
--
--- ------ -
------ -----
--
--- ----------- -
---- - ------
-
--
---
---------在这个例子中，我们创建了一个名为 dataService 的服务。该服务包含一个变量 data，它可以被其他控制器和指令访问。同时，该服务也提供了一个 init 方法，用于初始化数据。
在 MyController 中，我们将 dataService 注入到控制器中，并使用 $scope 来引用它。在控制器中，我们可以通过 dataService.data 来获取和设置 data 变量的值。当我们切换视图时，MyController 的作用域和实例会被重新创建，但是 dataService 仍然存在，因此输入框中的值不会被重置。
结论
在 Angular.JS 中，当多个视图需要共享同一个控制器时，我们可能会遇到
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27327