Javascript 如何防止在另一个$state更新时刷新特定的$state

预期 登录所有$states初始化后，单击一个Ticker按钮后，应该重新初始化的$states只有Ticker、标记和社交，而不是提要

结果 在登录所有$states后初始化，然后在单击Ticker按钮后重新初始化所有$states。提要不应

仪表板和馈送模块的体系结构应该如何防止这种情况？目前，我在

dashboard.html

中有

。它和仪表板是否应该在另一个中间状态/组件中进一步分离？也许是一个容器组件

完整代码

// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module('feed', ['ui.router'])

feed.config(function($stateProvider) {
  
  const feed = {
    name: 'feed',
    url: '/feed',
    templateUrl: '<em>Feed items go here.</em>'
  }
  
  $stateProvider.state(feed);
  
})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init (only once)', $state.params);
  }
})

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {});
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        },
        'tickers@dashboard': {
          templateUrl: 'tickers-module-template.html',
          controller: function($scope, $state) {
            console.log('Tickers init', $state.params);
        
            $scope.tickers = [
              { id: 1, ticker: 'AAPL' },
              { id: 2, ticker: 'GOOG' },
              { id: 3, ticker: 'TWTR' }
            ];
            
            $scope.clickTicker = function(ticker) {
              console.log(' ')
              console.log('Ticker clicked!')
              $state.go('dashboard', { ticker: ticker });
            }
          }
        },
        'tags@dashboard' : {
          templateUrl: 'tags-module-template.html',
          controller: function($scope, $state) {
            const tags_model = [
              {
                ticker: 'AAPL',
                tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
              },
              {
                ticker: 'GOOG',
                tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
              },
              {
                ticker: 'TWTR',
                tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
              }
            ];
            
            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }
            
            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];
            
            $scope.clickTag = function(tag) {
              $state.go('tags', { tag: tag });
            }
            
            console.log('Tags init', $state.params);
            // console.log(' Tags model', tags_model);
          }
        },
        'social@dashboard' : {
          templateUrl: 'social-module-template.html', 
          controller: function($state) {
            console.log('Social init', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
});

//馈送模块
////////////////////////////////////////////////////////////////////////////////
var feed=angular.module（'feed'，['ui.router']））
feed.config（函数（$stateProvider）{
常数馈送={
名称：“提要”，
url:“/feed”，
templateUrl:“源项转到此处。”
}
$stateProvider.state（提要）；
})
feed.component（'feedModule'{
templateUrl:'feed module template.html'，
控制器：函数（$scope，$state）{
log（'Feed init（仅一次）'$state.params）；
}
})
//路由器应用模块
////////////////////////////////////////////////////////////////////////////////
var routerApp=angular.module（'routerApp'，['ui.router'，'feed']）；
routerApp.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/login'）；
常量登录={
名称：'登录'，
url:“/login”，
templateUrl:'login.html'，
bindToController：对，
控制器：“l”，
控制器：函数（$state）{
this.login=函数（）{
$state.go（'dashboard'，{}）；
}
}
}
常量仪表板={
名称：“仪表板”，
url:“/dashboard”，
参数：{
股票代码：{}，
标记：{}
},
观点：{
'' : {
templateUrl:'dashboard.html'，
},
'tickers@dashboard': {
templateUrl:“tickers模块template.html”，
控制器：函数（$scope，$state）{
log（'Tickers init'，$state.params）；
$scope.tickers=[
{id:1，股票代码：'AAPL'}，
{id:2，股票代码：'GOOG'}，
{id:3，股票代码：'TWTR'}
];
$scope.clickTicker=功能（ticker）{
console.log（“”）
console.log（'Ticker clicked！'）
$state.go（'dashboard'，{ticker:ticker}）；
}
}
},
'tags@dashboard' : {
templateUrl:'tags module template.html'，
控制器：函数（$scope，$state）{
常量标记\u模型=[
{
股票代码：“AAPL”，
标签：[{id:1，术语：'iPhone7'}，{id:2，术语：'iPhone8'}，{id:3，术语：'TimCook'}]
},
{
股票代码：“GOOG”，
标签：[{id:4，术语：'Pixel'}，{id:5，术语：'Pixel XL'}，{id:6，术语：'Chrome Book'}]
},
{
股票代码：TWTR，
标签：[{id:7，术语：'tweet'}，{id:8，术语：'retweet'}，{id:9，术语：'moments'}]
}
];
功能匹配标签（股票代码、型号）{
返回模型过滤器（功能（obj）{
如果（obj.ticker==ticker）{return obj；}
});
}
$scope.tags_model=matchTags（$state.params.ticker.ticker，tags_model）[0]；
$scope.clickTag=函数（标记）{
$state.go（'tags'，{tag:tag}）；
}
log（'tagsinit'，$state.params）；
//日志（'Tags model'，Tags\u model）；
}
},
'social@dashboard' : {
templateUrl:'social module template.html'，
控制器：函数（$state）{
log（'socialinit'，$state.params）；
}
}
}
}
$stateProvider
.state（登录）
.国家（仪表板）；
});

思想，一个建筑会喜欢这个作品吗？基本上，

登录

将导航到一个

容器

状态，该容器将包含两个组件（

仪表板

和

提要

），每个组件都有自己的内部状态

---

根据您来自哪个州，我可以解决这个问题。基于这样一个事实，即在加载dashboard时只希望“一次”加载提要，我正在检查前一个状态的名称，如果它不是dashboard，那么我将继续执行其余的控制器代码。这是普朗克。请注意，如果添加更多的状态，并且如果其他人有更好的方法，那么这种方法的可伸缩性不是很强，我真的很想看到这一点

我将控制器代码更改如下：

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    var previousState = $state.params.previousState.name;
    if(previousState !== 'dashboard') {
      console.log('Feed init (only once)', $state.params); //do whatever u want here
    }
  }
});

我将以前的状态作为参数传递给其他状态，如下所示：

controller: function($state) {
  this.login = function() {
    $state.go('dashboard', {previousState : { name : $state.current.name }})
  }
}

---

查看完整的plunker，看看这是否有助于您的案例

我认为这是不可能的。通知所有、通知无或重新加载当前状态（带/不带通知）都有效。谢谢，是的，确实有效！我也得出了同样的结论，在登录后我还需要另一个$state。但是现在我面临一个新问题，你介意看看这里吗？沃思

200分：）我今天一定要看一看。