问题

我想在刷新页面或移动到其他视图然后通过导航器（nav.html）返回到同一视图时删除控制器实例。实际上，每次访问视图X.html时，我都希望程序检查X-controller.js是否存在，以及是否在创建新实例之前删除它。

我到这里有多远，这是一个我在网上找不到的2行解决方案，还是我正在考虑编写数小时的代码来完成这项工作？

背景

我的项目使用$routeProvider服务，而不是ng-controller指令。一旦应用程序启动，就会有两个视图，一个在顶部，您可以在控制器“Home - Contact - Support”（逻辑上，nav.html）之间来回导航，另一个在底部，即“首页“或”联系“等等。

在代码开始进行大量计算之前，我没有遇到任何问题。控制器的相同实例使用更多数据进行更新，计算丢弃的先前数据，依此类推。我在网上看过有关删除控制器的内容，但据我所知，这并不容易。

在回答问题之前的注意事项：

如果“编码时间”的第二个选项是解决方案我不希望任何人为我这样做，但是对文章或代码的引用将会受到赞赏，因为我没有找到任何有用的东西我自己
如果有一个更简单的解决方案仅在使用ng-controller而非$routeProvider时才适用，那么它对我来说不是一个选项。有超过20个视图和许多代码段，使用事件侦听器触发使用不同控制器重定向到不同视图。我目前不打算将$routeProvider更改为ng-controller。
如果解决方案实际上没有删除前一个实例，而是清除$ scope和javascript变量，那么这对我也有用。
我没有包含代码，因为这个问题不是关于错误或错误，如果由于某种原因需要$routeProvider配置或一个视图和控制器的代码片段让我知道，我将包括分类部分的代码替换为类似的伪代码。

澄清编辑

我将举例说明。假设X.html是由XCtrl.js控制的视图。 $scope.test在该控制器的开头$scope.test = 2启动，一旦点击视图中的按钮，$scope.test就会变为3.此外，X视图始终显示$scope.test 。所以我移动到那个视图，点击按钮，看到屏幕上显示3。然后我通过导航器移动到“Home”，然后返回“X”，仍然显示3。但我想要的是显示2，而不是3.我希望在该控制器中更新所有内容。

解决方案

最终我使用了不同的技术来解决这个问题。保存在本地存储中的所有数据都影响了$ scope变量（跟踪的变量太多，我没有注意到这一点）。为了解决这个问题，一旦访问控制器X控制的视图，我就清除了本地存储密钥localStorageService.set('keyUsed', []);。假设一个init函数，清除本地存储的代码行放在该函数的顶部。

我仍然会根据我最初认为的问题从下面的答案中找出正确的解决方案。

Answer 1

始终拥有'。'在您的ng模型中！

- MiškoHevery（AngularJS的父亲）

您很可能遇到$scope.test的问题而不是控制器本身的问题。如果您的模板x.html将test的值称为{{test}}（没有任何前缀），那么很可能您指的是错误范围的test。它通常是由于原型范围链相互延伸并回退到原型属性值。在这种情况下，选择XCtrl控制器的唯一内容，并将此控制器中的所有状态放入该命名空间。例如，使用x作为命名空间

$scope.x = {};
$scope.x.test = 2;

而不仅仅是

$scope.test = 2;

然后在x.html中将值称为

{{x.test}}

这是Angular最佳实践之一。

可能解决您的问题的另一个最佳做法实际上根本不使用$scope，而是使用控制器实例本身来存储与controllerAs语法结合的状态：

<强>的index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.min.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script data-require="angular-route.min.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-view>

  </body>

</html>

<强>的script.js

angular.module('app', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/x', {
        controller: 'xCtrl',
        controllerAs: 'x',
        templateUrl: 'x.html'
      })
      .when('/y', {
        controller: 'yCtrl',
        controllerAs: 'y',
        templateUrl: 'y.html'
      })
      .otherwise({
        redirectTo: '/x'
      })
  }])
  .controller('xCtrl', [function() {
    var x = this;
    x.test = 2;
    x.doSomething = function() {
      x.test ++;
    };
  }])
  .controller('yCtrl', [function() {
    var y = this;
    y.hello = 'Hello';
  }])

<强> x.html

<h1>X.html</h1>
<p>test = {{x.test}}</p>
<button ng-click="x.doSomething()">+1</button>
<a href="#/y">Link to Y</a>

<强> y.html

<h1>Y.html</h1>
<p>{{y.hello}}</p>
<a href="#/x">Link to X</a>

现场演示：

https://plnkr.co/edit/EpUn94uWMliTaG5mvPxv?p=preview

<强>链接：

了解没有“。”的问题。在您的模型中，请参阅MiškoHevery的this视频。
为了更好地理解controllerAs方法，您可以阅读Todd Motto的this帖子。

删除角度控制器实例

问题

背景

1 个答案: