2016-09-08 92 views
2

我一直在嘗試和搜索關於此的文章,以及我發現在運行時僅動態添加狀態。最接近我找到的解決方案是使用deferIntercept,$urlRouter.sync()$urlRouter.listen()。但是,$urlRouter似乎只能在運行時使用(在控制器用戶操作之前運行)。在控制器中添加路由

這個plunker顯示工作動態添加狀態到運行時但挑戰是在控制器中實現它。

下面是我想要實現的說明。我一直在這個問題上掙扎數週。希望有人能給我一些關於如何實現願望結果的暗示。

// Predefined state in config 
$stateProvider.state('default', { 
    url: '', 
    templateUrl: '', 
}) 

// Predefined state in config 
$stateProvider.state('home', { 
    url: '', 
    templateUrl: '', 
}) 

// Additional Added state in controller when user click button 
$scope.clickButton = function() { 
    $stateProvider.state('newpage', { 
     url: '', 
     templateUrl: '' 
    }) 
}; 
+0

有你有充分回答(s)http://stackoverflow.com/q/24727042/1679310。它們涵蓋了啓動場景(從服務器數據配置狀態)並在運行時添加新的狀態... –

+0

檢查這可能有助於http://stackoverflow.com/questions/25866387/angular-ui-router-programmatically-add-states/31478967 – nmanikiran

+0

@RadimKöhler感謝您的評論,我也通讀了問題和答案。但是我想在控制器用戶操作中添加新的狀態,而不是在運行時。 – stackdisplay

回答

2

我更新了你的代碼一點點:http://plnkr.co/edit/wDVf2S?p=preview

我加入點擊回調和2個陣列控制器,我NG-重複打印的index.html

app.controller('mainCtrl', mainCtrl); 

mainCtrl.$inject = ['$urlRouter']; 
function mainCtrl ($urlRouter) { 
    var vm = this; 

    // 'add new state' button click function 
    vm.addState = function() { 
    var name = 'new-state-' + (vm.hrefs.length - 2); 
    var newState = { 
     "url": "/" + name, 
     "abstract": false, 
     "parent": "", 
     "views": {} 
    }; 
    // add views 
    newState.views[name] = { 
     "name": name, 
     "template": "<div style='padding:20px; border: solid 1px red; margin-bottom: 15px;'>TEMPLATE FOR <em>" + name.toUpperCase() + "</em> GOES HERE</div>" 
    }; 
    newState.views["[email protected]"] = { 
     "name": "[email protected]", 
     "templateUrl": "tpl.content.html" 
    }; 
    newState.views["[email protected]"] = { 
     "name": "[email protected]", 
     "templateUrl": "tpl.left.html" 
    }; 

    $stateProviderRef.state(name, newState); 

    vm.hrefs.push(name); 
    // add to the head 
    vm.views.reverse().push(name); 
    vm.views.reverse() 

    $urlRouter.sync(); 
    $urlRouter.listen(); 
    }; 

    vm.hrefs = ['home', 'other', 'about']; 
    vm.views = ['', 'header', 'left', 'container', 'footer']; 
} 
+0

無論對OP有幫助還是不對,這仍然是一些很棒的東西。 – TSmith

+0

我更新了我的plunker,添加了從JSON文件加載狀態以及添加新狀態按鈕的按鈕。這兩個操作都是從控制器執行的。 – Andriy