設置$ scope.parameter，UI路由器

我得到main.html文件，裏面我得到section是可見/隱藏取決於$scope.parameter的狀態。這main.html用於我的兩個路線，一個是'主'，另一個是子路線。在這個樣子的，

.state('medications', { 
     url: '/medications', 
     templateUrl: '/partials/home.html', 
     controller: 'mainController', 
     resolve: { 
     postPromise: ['medicationservice', function(medicationservice) { 
      return medicationservice.getAll(); 
     }] 
     } 
     }) 
.state('medications.add', { 
     url: '/add', 
     templateUrl: '/partials/home.html', 
     controller: 'mainController' 
})

所以我想在這種情況下，做的是設置$scope.parameter顯示此section什麼。我已經看到了這個例子，但是我不知道如何設置它應該使用的控制器。

$stateProvider.state('contacts', { 
    template: '<h1>{{title}}</h1>', 
    controller: function($scope){ 
    $scope.title = 'My Contacts'; 
    } 
})

如何設置一個參數並明確設置控制器名稱？

來源

2016-04-07 Dejan.S

你試圖把該參數的服務，則指的是你的控制器（儘管也許另一個解析）內？ – SlightlyCuban

選項1：

使它成爲一個stateParams（推薦）：

.state('medications', { 
    params: {showSection: false}, 
    //... 

.state('medications.add', { 
    params: {showSection: true}, 
    //...

而且在mainController設置你的$scope變量爲$stateParam：

$scope.$watch($stateParams.showSection, function(){ 
    $scope.parameter = $stateParams.showSection; 
}, true);

選項2 ：

觀看$stateChangeStart事件，改變按toState您$scope變量：

$scope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    $scope.parameter = toState === 'medications' ? false : true; 
})

來源

2016-04-07 11:34:25 Daniel

感謝您向我介紹'params'，但此解決方案無效。看起來'showSection'沒有被子狀態觸發。我可以確認它在設置爲獨立狀態時確實設置了「showSection」。 –

@ Dejan.S更新了我的答案，因爲它對於兩個狀態都是相同的控制器，我相信'$ watch'應該可以解決問題並更新狀態變化時的變量。 – Daniel

'$ watch'與angularjs或ui-router有關嗎？謝謝。你知道如何從一個狀態觸發一個功能嗎？ –

使用$狀態的 '數據' 對象：

.state('medications.add', { 
    url: '/add', 
    templateUrl: '/partials/home.html', 
    controller: 'mainController', 
    data: { myParameter: 'true' } 
})

然後，控制器，你可以訪問數據使用$ state服務。將數據分配給控制器的範圍和你去好：

angular.module('myapp').controller('myController',function($scope,$state){ 
    $scope.myParameter = $state.data.myParameter; 
});

來源

2016-04-07 11:35:16 fikkatra

設置$ scope.parameter，UI路由器

回答

相關問題