Переключение между различными шаблонами/видами

Я хочу предложить два макета (то есть horizontal и vertical) для моего содержимого. Таким образом, включение в селектор автоматически приведет к соответствующей компоновке. Мое текущий JSBin не может выполнить это переключение:Переключение между различными шаблонами/видами

<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>

Кроме того, я надеюсь, что решение не будет отображать информацию о макете в URL; пользователи могут видеть и выбирать макет на веб-странице. Более того, я не хочу решения SHOWING/HIDING <ui-view="horizontal"></ui-view>" или <ui-view="vertical"></ui-view> на основе выбора. Я бы предпочел решение, которое передает информацию о макете состояниям, чтобы выбрать соответствующий шаблон (но не раскрывая его в URL-адресе).

Кто-нибудь знает, как это сделать?

источник

2017-02-08 Anonymous

Используйте параметр не-url, такой как layout.

Выберите шаблон, используя функцию templateUrl.

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider 
     .state('entry', { 
      url: '/', 
      params: { layout: 'vertical' }, 
      templateUrl: function(params) { 
       return params.layout + ".tpl"; 
      } 
     }) 
}]);

, то вы можете переключаться с помощью state.go или ui-sref

ui-sref="entry({ layout: 'horizontal' })"

источник

2017-02-10 22:39:15

Он работает, вот [JSBin] (https://jsbin.com/luzuzin/6/edit?html , выход) как запись ... –

хороший пример. Одно замечание: государство будет полностью перезагружено *, включая любые разрешения. –

Переключение между различными шаблонами/видами

ответ

Смежные вопросы