javascript - 如何防止兄弟状态 Controller 刷新?

标签 javascript angularjs angular-ui-router

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

我有一个主仪表板父状态,带有2个子状态标签股票代码

当我点击tickers中的按钮时,只有tags状态应该刷新。目前它们都刷新了。

enter image description here

enter image description here

^ onInittickersController console.log 只能运行一次。但是,每次单击股票代码时都应该运行tagsController。

<小时/>
var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dash');

    var dash = {
      name: 'dash',
      url: '/dash?ticker',
      params: {
        ticker: 'AAA'
      },
      views: {
        '': { templateUrl: 'dashboard.html' },
        'tagsList@dash': {
          url: '/tags',
          templateUrl: 'tags-list.html',
          controller: 'tagsController'
        },
        'tickersList@dash': {
          url: '/tickers',
          templateUrl: 'tickers-list.html',
          controller: 'tickersController'
        },
        'alertsList@dash': {
          url: '/alerts',
          templateUrl: 'alerts-list.html',
          controller: 'alertsController'
        }
      }
    };

    $stateProvider
      .state(dash);            
});

routerApp.controller('tagsController', function($scope, $state) {
    $scope.ticker = $state.params.ticker;

    function getList(ticker) {
      switch(ticker) {
          case 'AAA' : return ['aaa tag 1', 'aaa tag 2', 'aaa tag 3'];
          case 'BBB' : return ['bbb tag 1', 'bbb tag 2', 'bbb tag 3'];
          case 'CCC' : return ['ccc tag 1', 'ccc tag 2', 'ccc tag 3'];
      } 
    }

    $scope.tags = getList($state.params.ticker);

    this.$onInit = function() {
      console.log('onInit tagsController');
    };
});

routerApp.controller('tickersController', function($scope, $state) {
    $scope.changeScotchState = function(theTicker) {
        $state.go('dash', { ticker: theTicker });
    };

    $scope.tickers = [
      'AAA', 'BBB', 'CCC'
    ];

    this.$onInit = function() {
      console.log('onInit tickersController', $state.params.ticker);
    };
});

routerApp.controller('alertsController', function($scope, $state) {

    this.$onInit = function() {
      console.log('onInit alertsController', $state.params.ticker);
    };

});

最佳答案

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

如果不将 View 移动到父状态之一,则无法阻止 View 刷新。这是应该起作用的更改后的状态

    var tags = {
      name: 'dash.tags',
      url: '?ticker',
      views: {
        'tagsList@dash': {
          templateUrl: 'tags-list.html',
          controller: 'tagsController'
        }
      }
    }

var dash = {
  name: 'dash',
  url: '/dash',
  abstract: true,
  views: {
    '': { templateUrl: 'dashboard.html' },
    'tickersList@dash': {
      templateUrl: 'tickers-list.html',
      controller: 'tickersController'
    }
  }
};

关于javascript - 如何防止兄弟状态 Controller 刷新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42353725/

相关文章:

javascript - 防止 url 在底部导航栏弹出

javascript - 在默认事件处理程序之前执行某些操作

javascript - $watch 只触发一次

javascript - 在 Jasmine 中使用 $q 测试 AngularJS 服务

javascript - AngularJS 中的继承和嵌套 View

javascript - Angular : how do I call a scope method on state change?

javascript - Angular JS ui-router如何从父级重定向到子状态?

javascript - 检索 casperjs 中元素的选中属性

javascript - 从 Google Earth Engine 上的 NEX-GDPDP 产品导出每日气候数据

javascript - 如何在 AngularJs 1.x 中动态更改元标题、元关键字、元描述?