Question

鉴于本帖子底部（jsfiddle.net）的ng-view简单应用程序：

当我等待2秒钟时＃34;一个：初始＆＃34;更改为＆＃34; one：已更改＆＃34;。如果我然后点击＆＃34; Two＆＃34;然后＆＃34; One＆＃34;，文字回到＆＃34; one：initial＆＃34;。

让我很困惑 - 我的心理模型是两个＆＃34;子应用程序＆＃34;与此同时只有一个可见。

我认为这是错误的思考方式，因为One重置了。我该怎么想？

当我切换离开并回到OneCtrl $scope失去$rootScope状态这一事实时，Angular-y的方法是什么？我可以将状态存储在<div ng-app="app"> <p><a href="#/one">One</a> | <a href="#/two">Two</a></p> <ng-view>Loading…</ng-view> <script type="text/ng-template" id="one.html"><p>{{state}}</p></script> <script type="text/ng-template" id="two.html"><p>two</p></script> </div> - 这是不错的做法？

HTML：

angular.module('app', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/one', {templateUrl: 'one.html',   controller: OneCtrl}).
      when('/two', {templateUrl: 'two.html',   controller: TwoCtrl}).
      otherwise({redirectTo: '/one'});
}]);

function OneCtrl($scope, $timeout) {
  $scope.state = "one: initial";
  $timeout(function() { $scope.state = "one: changed" }, 2000);
}

function TwoCtrl($scope) {
}

JS：

{{1}}

Answer 1

每次路线更改都会重新初始化控制器。如果您希望将更改保持为“状态”，那么您可以在parentCtrl控制器的范围内将状态保存在更高的范围链中：

<div ng-app="app" ng-controller="parentCtrl" ng-init="state={ value:'one: initial'}">
  <p><a href="#/one">One</a> | <a href="#/two">Two</a></p>
  <ng-view>Loading…</ng-view>

  <script type="text/ng-template" id="one.html"><p>{{state}}</p></script>
  <script type="text/ng-template" id="two.html"><p>two</p></script>
</div>

然后在路径视图中，设置从父范围继承的状态：

function OneCtrl($scope, $timeout) {

  $timeout(function() { $scope.state.value = "one: changed" }, 2000);
}

function TwoCtrl($scope) {
}

这样做是没有错的。但我认为更好的做法是将状态存储在服务中。由于它们始终是单例和可注射的，因此您的控制器可以轻松共享实例数据和封装功能，而无需担心路由导致问题。

我应该如何看待控制器使用ng-view导航重置状态？

1 个答案: