다른 템플릿 /보기 간 전환

내 콘텐츠에 대해 두 가지 레이아웃 (예 : 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

layout과 같은 비 URL 매개 변수를 사용하십시오.

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를 사용하여 전환 할 수 있습니다 , 출력) ... –

좋은 예입니다. 한 가지주의해야 할 점은 모든 해결 방법을 포함하여 상태는 완전히 다시로드됩니다 *. –

답변

관련 문제