I want to propose two layouts (ie, horizontal and vertical) for my contents. So switching in the selector will lead automatically to the corresponding layout. My current JSBin cannot accomplish this switching:
<html ng-app="flapperNews">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script type="text/ng-template" id="horizontal.tpl">
{{one}}, {{two}}
</script>
<script type="text/ng-template" id="vertical.tpl">
{{one}}<br>{{two}}
</script>
<script>
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('entry', {
url: '/',
templateUrl: "vertical.tpl"
})
}]);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.one = "one";
$scope.two = "two";
$scope.layouts = ["horizontal", "vertical"];
$scope.$watch('layout', function () {
$state.go('entry'); // need to amend this such that changing "layout" leads to different template
})
}])
</script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="layout" ng-options="x for x in layouts"></select>
<br><br>
<ui-view></ui-view>
</body>
</html>
Additionally, I hope the solution would NOT display the layout information in the URL; users can only see and choose layout in the web page. Moreover, I don't want a solution by SHOWING/HIDING <ui-view="horizontal"></ui-view>" or <ui-view="vertical"></ui-view> based on the selection. I would prefer a solution that passes layout information to states to choose the corresponding template (but without disclosing it in URL).
Does anyone know how to do this?
layout.Choose the template using a templateUrl function.
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('entry', {
url: '/',
params: { layout: 'vertical' },
templateUrl: function(params) {
return params.layout + ".tpl";
}
})
}]);
then you can switch using state.go or ui-sref
ui-sref="entry({ layout: 'horizontal' })"