Question

我有状态A和状态B.两个状态的控制器是不同的。当我们改变到状态B时，状态B的范围被创建。

当我们回到状态A时，状态B的范围被破坏了吗？
当回到状态A时，范围关闭状态A重新加载？
然后视图重新加载多少次？

Answer 1

当我们回到状态A时，状态B的范围是否会被破坏？

是的，状态B的范围被破坏，因此状态B的控制器范围的$destroy被调用。（如下面的代码片段中所述）

回到状态A时，状态A的范围是否重新加载？

是的，控制器A将被重新实例化，并且每次都会在给定的ng-view中加载模板。

那么视图重新加载了多少次？

每次访问任何州时，视图都会被重新加载。视图的$scope会发出$viewContentLoaded个事件（ng-view docs）。（如下面的代码段中所示）

这是ui-router州的简单实现，用于解释此信息。（same in plnkr）

＆＃13;

(function() {

  var myapp = angular.module('myapp', ["ui.router"]);

  myapp.config(function($stateProvider, $urlRouterProvider) {

    // For any unmatched url, send to /route1
    $urlRouterProvider.otherwise("/route1")

    $stateProvider
      .state('route1', {
        url: "/route1",
        template: "<h3>List of Route 1 Items</h3><ul><li ng-repeat='item in items'>{{item}}</li></ul>",
        controller: "route1ctrl"
      })
      .state('route2', {
        url: "/route2",
        template: "<h3>List of Route 2 Things</h3><ul><li ng-repeat='thing in things'>{{thing}}</li></ul>",
        controller: "route2ctrl"
      })
  });

  myapp.controller('route1ctrl', ['$scope', function($scope) {

    $scope.items = ["A", "List", "Of", "Items"];

    $scope.$on('$viewContentLoaded', function() {
      console.log("route 1 list ctrl loaded")
    });

    $scope.$on('$destroy', function() {
      console.log("route 1 destroyed")
    });
  }]);

  myapp.controller('route2ctrl', ['$scope', function($scope) {

    $scope.things = ["A", "Set", "Of", "Things"];

    $scope.$on('$viewContentLoaded', function() {
      console.log("route 2 list ctrl loaded")
    });

    $scope.$on('$destroy', function() {
      console.log("route 2 destroyed")
    });
  }]);

})();

＆＃13;

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <title>AngularJS: UI-Router Quick Start</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">
  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Quick Start</a>
      <ul class="nav">
        <li><a ui-sref="route1">Route 1</a></li>
        <li><a ui-sref="route2">Route 2</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>
    </div>
  </div>

  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>

  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

  <!-- App Script -->
  <script src="script.js"></script>
  <script src="route1.js"></script>
  <script src="route2.js"></script>

</body>

</html>

＆＃13;

当我们从州B回来时，状态A的范围会重新加载吗？

1 个答案: