如何防止刷新兄弟狀態控制器？

https://plnkr.co/edit/zfmuZXp88cSbdOsibv3y?p=preview 如何防止刷新兄弟狀態控制器？

我有2子主dashboard父狀態狀態tags和tickers。

當我點擊tickers中的一個按鈕時，只有tags狀態應刷新。目前他們都在刷新。

^的onInit tickersController的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' }, 
     '[email protected]': { 
      url: '/tags', 
      templateUrl: 'tags-list.html', 
      controller: 'tagsController' 
     }, 
     '[email protected]': { 
      url: '/tickers', 
      templateUrl: 'tickers-list.html', 
      controller: 'tickersController' 
     }, 
     '[email protected]': { 
      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); 
    }; 

});

來源

2017-02-20 Leon Gaban

可能是由狀態改變？所以會影響到門票查看？ –

是的，你如何避免更改代幣視圖？或任何其他的孩子。基本上我只希望儀表板的孩子能夠刷新，如果他們需要改變一個特定的狀態變量。其實我會繼續前進並添加第三個控制器。 –

更新網址：'/ tags'，而不是父視圖？ –

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

你不能把從刷新視圖，而不將其移動到父狀態的一個。這裏的變化狀態，應該工作

var tags = { 
 
     name: 'dash.tags', 
 
     url: '?ticker', 
 
     views: { 
 
     '[email protected]': { 
 
      templateUrl: 'tags-list.html', 
 
      controller: 'tagsController' 
 
     } 
 
     } 
 
    } 
 

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

來源

2017-02-20 20:55:40

謝謝，但在你的例子嗯標籤列表沒有被顯示。實際上，我在這裏分出了一個新的plnkr，每個狀態對象都打開了：https://plnkr.co/edit/NbB98J7TwUz5SrgE5jQn?p=preview –

更新了plunk。我忘了在父母狀態中添加'abstract：true'。 –

Heya所以我試圖刪除ui-sref，所以我可以在Javascript中使用'$ state.go'，並且出現錯誤'錯誤：無法轉換爲抽象狀態'dash''，請介紹一下？ http://stackoverflow.com/questions/42371668/cannot-transition-to-abstract-state-angular-ui-router –

我編輯你的plunker無狀態刷新工作：

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

廣播：

$scope.changeScotchState = function(theTicker) { 
    $rootScope.$broadcast('newData', theTicker); 
};

和$上：

$scope.$on('newData', function(event, ticker){ 

     $scope.tags = getList(ticker); 
     $scope.ticker = ticker; 
    })

是最重要的部分和變化。

來源

2017-02-20 21:09:30

謝謝！你的代碼也可以作爲Stepans ...好奇，但是我沒有看到你在上面使用這些事件的地方？ 'tickersController'和'tagsController'中的 –

。首先我更新了'changeScotchState'函數，然後在tagsCtrl中獲取動作 –

這兩個代碼都是有效的，因爲方法非常不同。我經常使用$ broadcast並在構建基於組件的應用程序時發出。組件不直接通信，所以它是必要的。 –

如何防止刷新兄弟狀態控制器？

回答

相關問題