正在重置 Angular 页

Question

我的 angular 页面上有一个按钮，我希望能够重置该页面。通过重置我的意思是将页面恢复到原始状态，就好像用户刚刚第一次访问该页面一样。我正在考虑走复制路线，所以我尝试了这样的事情：

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

但是那抛出了 this error。我有几个范围变量和许多控制器变量。我不想单独保存它们。我认为以原始状态复制页面然后通过检索原始版本重置它会更容易。但这似乎不是一个可行的解决方案。有什么想法可以解决这个问题吗？

编辑 1： 我尝试了 Ben Felda 的解决方案，但无法正常工作。这是我的控制器代码：

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 文件。知道我做错了什么吗？

Answer 1

尝试使用 $route.reload()

Angular API Reference

Causes $route service to reload the current route even if $location hasn't changed.

As a result of that, ngView creates new scope and reinstantiates the controller.

Answer 2

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

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;
    }
};

然后当你想重置它时，只需调用控制器上的激活方法即可。

正在重置 Angular 页

Resetting Angular Page

javascript

angularjs

angularjs-scope

reset