Javascript 重置角度页面

我的角度页面上有一个按钮，我希望能够重置页面。重置的意思是将页面恢复到原始状态，就像用户第一次访问页面一样。我在考虑走复制路线，所以我尝试了以下方法：

$scope.orig = angular.copy($rootScope);

var MyCtrl = function($route, $scope, $log, $http, $sce, $q, $filter) {

    var vm = this;
    vm.$route = $route;
    vm.$scope = $scope;
    vm.$log = $log;
    vm.$http = $http;
    vm.$sce = $sce;
    vm.$q = $q;
    vm.$filter = $filter;
    vm.activate = activate() ;

    activate()

   function activate() {
        vm.ShouldAutoStart = false;
        vm.viewA = true;
        vm.viewB = false;
        vm.topButtonClicked = false;
        vm.showIDTable = false;
        vm.topRequest;
    }
};

但这让我很失望。我有几个范围变量和许多控制器变量。我不想单独保存它们。我认为在原始状态下复制页面，然后通过检索原始版本来重置页面会更容易。但这似乎不是一个可行的解决方案。有没有办法解决这个问题

编辑1: 我尝试了本·费尔达的解决方案，但没有成功。这是我的控制器代码：

var app = angular.module('myApp',['ngRoute']);

var MyCtrl = function($route, $scope, $log, $http, $sce, $q, $filter) {
    this.$route = $route;
    this.$scope = $scope;
    this.$log = $log;
    this.$http = $http;
    this.$sce = $sce;
    this.$q = $q;
    this.$filter = $filter;

    this.ShouldAutoStart = false;
    this.viewA = true;
    this.viewB = false;
    this.topButtonClicked = false;
    this.showIDTable = false;
    this.topRequest;
};

MyCtrl.prototype.reset = function() {
    var _this = this;
    console.log("route reloaded");
    _this.$route.reload();
};

MyCtrl.prototype.getInfo = function() {
    var _this = this;
    _this.reset();
    //do other stuff
};

MyCtrl.$inject = ['$route','$scope', '$log', '$http', '$sce', '$q', '$filter'];
app.controller('MyCtrl', MyCtrl);

这是我的HTML：

<form ng-submit="dp.getInfo(dp.id)" class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input type="text" ng-model="dp.id" class="form-control" required/>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

提交

---

我在

index.html

中包含了

angular route.js

文件。知道我做错了什么吗？

尝试使用

$route.reload（）

导致$route服务重新加载当前路由，即使$location未更改

因此，ngView创建了新的作用域并重新实例化 控制器

---

我不确定除了您发布的内容之外还有哪些其他变量，但请将所有实例化代码移动到一个单独的方法中，以便您的控制器看起来像这样：

$scope.orig = angular.copy($rootScope);

var MyCtrl = function($route, $scope, $log, $http, $sce, $q, $filter) {

    var vm = this;
    vm.$route = $route;
    vm.$scope = $scope;
    vm.$log = $log;
    vm.$http = $http;
    vm.$sce = $sce;
    vm.$q = $q;
    vm.$filter = $filter;
    vm.activate = activate() ;

    activate()

   function activate() {
        vm.ShouldAutoStart = false;
        vm.viewA = true;
        vm.viewB = false;
        vm.topButtonClicked = false;
        vm.showIDTable = false;
        vm.topRequest;
    }
};

---

然后，当您想重置控制器时，只需在控制器上调用activate方法即可

将所需内容保存到

$rootScope

内部的一个内部对象中，并复制该对象，而不是复制整个monster对象

$rootScope.myObject={}$rootScope.myObject.name='whatever'$scope.orig=angular.copy（$rootScope.myObject）

他说的是

$rootScope

，而不是

$route

@AlonEitan明白了，重新加载路由会重新实例化控制器和作用域。节省了大量的复制麻烦。@BenFelda我尝试了这个解决方案，并更新了我的帖子以显示代码。我仍然无法重置所有变量。知道怎么了吗？