在UI路由器改变路径之前，销毁范围 [英] Destroy scope before change path in ui-router

问题描述

我用 UI-路由器路由。当我改变从状态到另一个状态，并回到同一状态的路径，我看到，在旧州范围$有（与它的属性）的

I use UI-Router routing. When I change path from a state to another and going back to same state, I see that old $scope in state is there (with it's properties).

我要摧毁的状态变化之前$范围，所以，当我回来的状态第二次，就会有一个干净的新范围。我想在这种情况下访问范围：

I want to destroy that $scope before state changes, So when I come back to state for second time, there will be a clean new scope. I tried to access scope in this event:

$rootScope.$on('$stateChangeStart', 
   function(event, toState, toParams, fromState, fromParams) {
     // fromState.$scope.$destroy();
});

但目前还没有到$范围的任何引用。我之前改变状态访问范围角 UI-路由器？

推荐答案

我会说，你体验到什么是有点不同的比你描述的，或你以为发生了什么。请检查该例如：

I would say, that what you experience is a bit different than you described, or you thought what is happening. Please, check for example this:

• 我如何分享angularjs UI路由器状态之间$范围的数据？


• 与UI路由器范围和控制器实例

• How do I share $scope data between states in angularjs ui-router?
• scope and controller instantiation with ui router

在一般情况下，一旦状态变化做（不拒绝），在老 $范围是肯定的摧毁。如果我们然后再返回，新的 $范围是为我们创造。但是，这的 $范围的创建是这样的：

In general, once the state change is done (not rejected), the old $scope is for sure destroyed. If we navigate then back, new $scope is created for us. But this $scope is created this way:

viewDirective.js

    function updateView(firstTime) {
      var newScope,
          name            = getUiViewName(scope, attrs, $element, $interpolate),
          previousLocals  = name && $state.$current && $state.$current.locals[name];

      if (!firstTime && previousLocals === latestLocals) return; // nothing to do
      // HERE
      newScope = scope.$new();
      ...

的结构： $范围新（）; 是理解的关键。这实际上意味着，我们使用原型继承

The construct: scope.$new(); is a key to understanding. This in fact means, that we use prototypical inheritance

• 什么范围原型的细微差别AngularJS /原型继承？

• What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

这简而言之可以描述：

我们提供了一个 $范围已克隆了其母公司的所有属性。

we are provided with a $scope which has cloned all the properties from its parent.

所以，如果父母中含有一定的参考（路径中有'。'）这样

So if parent contains some reference (has '.' in the path) like this

// parent scope
$scope.Model = {
  ...
};

和任何一个孩子的状态将改变，像这样

And any child state will change that like this

$scope.Model.name = "User";

这价值将被存储在父状态的 $范围的又一次......可用于该州的任何一个孩子的

That value will be stored in parent state $scope and available again ... for any next child of this state.

请注意：同一 viewDirective.js但elswhere 可以用来证明一个事实 - $范围破坏 如果我们离开的状态：

NOTE: the same viewDirective.js but elswhere could be used to demonstrate the fact - $scope is destroyed if we leave the state:

    function cleanupLastView() {
      if (previousEl) {
        previousEl.remove();
        previousEl = null;
      }

      if (currentScope) {
        currentScope.$destroy();
        currentScope = null;
      }
      ...

扩展

我创建 rel=\"nofollow\">工作的例子，这两个状态：

I created a working example here, with these two states:

.controller('ParentCtrl', ['$scope', function ($scope) { 
  $scope.Model = {
    SharedName: "This is shared name",
  }
  $scope.NotSharedName = $scope.NotSharedName 
                      || "This name is cloned, but then lives its own way";
}])
.controller('ChildCtrl', ['$scope', function ($scope) {}])

和这两种方式如何改变值的（一切都将遵循上述逻辑）的：

And these two ways how to change values (all will follow the logic described above):

<p>this will be shared among all children and parent
  <input ng-model="Model.SharedName" />
</p>
<p>this will always copied from parent, live then in each child
  <input ng-model="NotSharedName" />
</p>

检查一下这里

这篇关于在UI路由器改变路径之前，销毁范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！