Question

https://plnkr.co/edit/bOZW1a9u62W1QA6cYjYj?p=preview

预期

在登录之后所有$ states初始化，然后点击Ticker按钮后，应该重新初始化的唯一$状态是自动收报机，标签和社交，但不是 Feed 。

结果

在登录之后，所有$ states初始化，然后在单击Ticker按钮后重新初始化所有$ states。 Feed 不应该。

如何设计仪表板和进纸模块以防止这种情况发生？目前我在<feed-module></feed-module>内有dashboard.html。它和仪表板是否应该在另一个中间状态/组件中进一步分离？也许是一个container.component？

完整代码

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

想一想，像这样的架构会起作用吗？基本上login会导航到container状态，其中包含2个组件（dashboard和feed），每个组件都有自己的内部状态？

Answer 1

我可以根据你来自哪个州来解决这个问题。基于这样一个事实，你只需要在加载仪表板时“加载”一次加载，我正在检查以前状态的名称，如果它不是仪表板，那么我将继续执行其余的控制器代码。这是掠夺者。请注意，如果添加更多状态并且如果其他人有更好的方法，这不是一种非常可扩展的方法，我真的很想看到它。

我按如下方式更改了控制器代码：

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

我将以前的州作为params传递给其他州：

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

查看完整的plunker here，看看这有助于你的情况！

当另一个$ state更新时，如何防止特定$ state刷新

预期

结果

1 个答案: