ui路由器動態模板路徑

我使用的是ui路由器0.2.8。我想要根據設備寬度加載模板。我可以毫無問題地獲得設備寬度，將其設置在範圍內，但我可以弄清楚如何將它綁定到$ stateParams。我有另一個控制器中的範圍變量，它可以訪問狀態的控制器，它只是不可用於狀態本身。我試過templateProvider，但那只是返回給我一個字符串。我還可以嘗試什麼才能使其工作？ui路由器動態模板路徑

.state('list', { 
abstract: true, 
url: "/list", 
templateUrl: 'views/'+$stateParams.somevalue+'/page.html', 
    controller: "myCtrl" 
}) 
    .state('list.first', { 
url: "/first", 
templateUrl: "views/first.html" 
    })

來源

2014-05-07 Jimi

您可以訪問$stateChangeStart事件中的狀態參數。您也可以在那裏動態更新templateUrl。

因此，也許你的代碼可能是這個樣子：

angular.module('app', ['ui.router']) 
.run(function($rootScope){ 
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams) { 
     if (toState.name === 'list') { 
      toState.templateUrl = 'views/'+toParams.somevalue+'/page.html'; 
     } 
    }); 
}

你也可能想看看onEnter callback通過ui.router支持。我之前沒有使用過，但可能會比將模板生成代碼放入$stateChangeStart事件更好看。

來源

2014-05-07 16:02:46 biofractal

感謝您的回答它的工作原理很好，非常感謝。 – Jimi

這是一個很好的答案，但它打破了UI-Router的狀態配置的想法。與其將狀態全部保存在一個配置塊中，不如將配置分割到多個位置，這隻會令人頭痛。請參閱Dipesh Kc的答案，以獲得更易於配置和易於維護的解決方案。 –

你可能會尋找基於狀態的動態模板名稱PARAMS

$stateProvider.state('contacts', { 
    templateUrl: function ($stateParams){ 
    return '/partials/contacts.' + $stateParams.filterBy + '.html'; 
    } 
})

查看文檔的更多信息 https://github.com/angular-ui/ui-router/wiki#templates

來源

2014-06-17 10:12:42

真棒回答@Dispesh！ – Jimi

這應該是被接受的答案 –

作爲「正確的」解決方案，在某些情況下僅使用注入的$ stateParams可能不夠。因此@biofractal的答案可能是更一般的案例解決方案 –

該參考這裏是偉大的，我搞清楚怎麼做動態模板在角度上，但我想用我自己的解決方案進行更新。基於Dipesh的Kc的（這偉大工程，爲重新定義抽象狀態父templateUrl）

解決方案1請注意，我用toParams而不是$ stateParams：

// custom parent template 
.state('template', { 
    abstract: true, 
    url: "/tm/:tmfolder/:tmview", 
    templateUrl: function (toParams) { 
     return 'views/' + toParams.tmfolder + '/' + toParams.tmview + '.html'; 
    }, 
}) 
.state('template.contacts', { 
    url: "/contacts/:folder/:view", 
    templateUrl: function (toParams) { 
     return 'views/' + toParams.older + '/' + toParams.view + '.html'; 
    }, 
})

解決方案2基於biofractal的（有沒有辦法更新父templateUrl使用此方法）：

.state('contact', { 
    url: "/contact/:folder/:view" 
}) 

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) { 
    var customStates = ["contact"] 
    for (var i = 0; i < customStates.length; i++) { 
     if (toState.name.indexOf(customStates[i]) != -1) { 
      toState.templateUrl = 'views/' + toParams.folder + '/' + toParams.view + '.html'; 
      break; 
     } 
    } 
});

來源

2017-10-05 18:01:39 lastlink

ui路由器動態模板路徑

回答

相關問題