如何在不重新加载页面的情况下重新启动角度应用程序? [英] How to restart angular app without page reload?

问题描述

我想在不强制刷新页面的情况下重置我的角度应用程序的状态.惯用的方法是什么?

I would like to reset the state of my angular app without forcing a page refresh. What's the idiomatic way to do this?

推荐答案

我不知道是否有惯用的方法，但是如果您使用手动引导程序(即摆脱ng-app)，则可以重置

I don't know if there's an idiomatic way, but if you use manual bootstrap (ie, get rid of ng-app), then to reset you could

1. 将您引导成角的元素删除
2. 用元素的干净副本替换它
3. 再次运行引导程序

HTML示例:

<div id="myid" ng-controller="MyCtrl">
  <button ng-click="i = i+1">Add 1</button>
  <span>i = {{i}}</span>
  <button ng-click="reset()">RESET</button>
</div>

示例控制器/JS(还包括jQuery)，将在onload上运行:

Example controller/JS (with jQuery included as well), which would be run on onload:

var $cleanCopy = $("#myid").clone();

function bootstrap() {
  angular.bootstrap(document.getElementById('myid'), ['mymodule']);
}

angular.module('mymodule', []).controller('MyCtrl', function($scope) {
  $scope.i = 1; 

  $scope.reset = function() {
    // You need this second clone or angular bootstraps
    // into the original clone!
    $("#myid").replaceWith($cleanCopy.clone());
    bootstrap();
  };
});

bootstrap();

这是正在工作的JSFiddle: http://jsfiddle.net/zd377/2/

Here is a working JSFiddle: http://jsfiddle.net/zd377/2/

这篇关于如何在不重新加载页面的情况下重新启动角度应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！