在 ui-router 中更改路径之前销毁范围 [英] Destroy scope before change path in ui-router

问题描述

我使用 UI-Router 路由.当我将路径从一个状态更改为另一个状态并返回到相同状态时，我看到状态中的旧 $scope (带有它的属性).

我想在状态改变之前销毁那个 $scope，所以当我第二次回到状态时，会有一个干净的新作用域.我尝试在此事件中访问范围:

$rootScope.$on('$stateChangeStart',功能(事件，toState，toParams，fromState，fromParams){//fromState.$scope.$destroy();});

但是没有任何对 $scope 的引用.我可以在 angular UI-Router 中更改状态之前访问范围吗?

解决方案

我会说，你所经历的与你描述的有点不同，或者你认为正在发生的事情.请检查例如这个:

• 如何在 angularjs ui-router 中的状态之间共享 $scope 数据?
• 使用 ui 路由器的范围和控制器实例化

通常，一旦状态更改完成(未拒绝)，旧 $scope 肯定会销毁.如果我们导航然后返回，则会为我们创建新的 $scope.但是这个 $scope 是这样创建的:

viewDirective 的源代码.js

 函数 updateView(firstTime) {var newScope，name = getUiViewName(scope, attrs, $element, $interpolate),previousLocals = 名称 &&$state.$current &&$state.$current.locals[name];if (!firstTime && previousLocals === latestLocals) 返回；//没事做//这里newScope = scope.$new();...

结构:scope.$new(); 是理解的关键.这实际上意味着，我们使用原型继承

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

简而言之，可以这样描述:

<块引用>

我们提供了一个 $scope，它从其父级克隆了所有属性.

因此，如果 parent 包含一些引用(路径中有 '.')

//父作用域$scope.Model = {...};

任何子状态都会像这样改变

$scope.Model.name = "用户";

该值将存储在 父 状态 $scope 中，并再次可用...对于此状态的任何下一个 子.

注意:相同的 viewDirective.js但是 elswhere 可以用来证明这个事实——如果我们离开状态，$scope 被销毁:

 function cleanupLastView() {如果(上一个El){previousEl.remove();previousEl = null;}如果(当前范围){currentScope.$destroy();当前范围 = 空；}...

扩展

我创建了这里的一个工作示例，具有以下两种状态:

.controller('ParentCtrl', ['$scope', function ($scope) {$scope.Model = {SharedName: "这是共享名称",}$scope.NotSharedName = $scope.NotSharedName||这个名字是被克隆的，但又以自己的方式生活"；}]).controller('ChildCtrl', ['$scope', function ($scope) {}])

以及这两种方式如何改变值(都将遵循上述逻辑):

这将在所有孩子和父母之间共享<input ng-model="Model.SharedName"/></p><p>这将始终从父级复制，然后在每个子级中存在<input ng-model="NotSharedName"/></p>

在这里

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

But there isn't any reference to $scope. Can I access scope before change state in angular UI-Router?

解决方案

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:

• 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:

The source code of theviewDirective.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

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

And that in a nutshell could be described:

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.

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

EXTEND

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>

Check it here

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