2つのレイアウトを同じ$スコープで共有する

私のコンテンツに2つのレイアウト（つまり、horizontalとvertical）を提案したいと思います。セレクタを切り替えると自動的に対応するレイアウトになります。ここJSBinされています。ただし、上記のコードで、私たちはビューを変更するたびに、$scope.oneと$scope.twoが初期値にリセットされ

<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"> 
     <textarea ng-model="one"></textarea>, <textarea ng-model="two"></textarea> 
     <br><br>{{one}}+{{two}} 
    </script> 
    <script type="text/ng-template" id="vertical.tpl"> 
     <textarea ng-model="one"></textarea><br><textarea ng-model="two"></textarea> 
     <br><br>{{one}}+{{two}} 
    </script> 
    <script> 
    var app = angular.module('flapperNews', ['ui.router']); 

    app.config(['$stateProvider', function ($stateProvider) { 
     $stateProvider 
      .state('entry', { 
       url: '/', 
       params: { tpl: 'vertical' }, 
       templateUrl: function (params) { 
        return params.tpl + ".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', {tpl: $scope.layout}); 
     }) 
    }]) 
    </script> 
</head> 

<body ng-controller="MainCtrl"> 
    <select ng-model="layout" ng-init="layout = 'horizontal' || layouts[0].value" ng-options="x for x in layouts"></select> 
    <br><br> 
    <ui-view></ui-view> 
</body> 

</html>

。レイアウトの変更に関係なく、テキストエリアの変更が残ることを願っています。

誰もこれを解決する方法を知っていますか？

出典

2017-02-19 SoftTimur

簡単factories（AngularJS factory documentation）を使用して、異なるビュー間で同じデータを共有します。試してくださいthis example、それはコントローラ間でデータを共有するmyFactoryという単純な工場を使用しています。これはあなたのケースと同じコントローラでも動作します。

var myApp = angular.module("myApp",[ "ui.router"]); 
 

 
myApp.config(function ($stateProvider, $urlRouterProvider){ 
 
    $stateProvider.state("state1", { 
 
     url: "#", 
 
     template: '<p>{{ aValue }}</p><button ng-click="bindValue(\'its me\')">Bind value</button>', 
 
     controller: "myController" 
 
    }).state("state2", { 
 
     url: "#", 
 
     template: '<p>{{ aValue }}</p><button ng-click="bindValue(\'its me\')">Bind value</button>', 
 
     controller: "myController" 
 
    }); 
 
}); 
 

 

 
myApp.controller("myController", function($scope, myFactory) { 
 
    $scope.aValue = myFactory.myValue; 
 

 
    $scope.bindValue = function (value) { 
 
     $scope.aValue = value; 
 
     myFactory.myValue = value; 
 
    } 
 
}); 
 

 

 
myApp.factory('myFactory', function() { 
 
    return { 
 
     myValue: '' 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <nav> 
 
     <a ui-sref="state1">State 1</a> 
 
     <a ui-sref="state2">State 2</a> 
 
    </nav> 
 
    <div ui-view></div> 
 
</div>

出典

2017-02-19 16:26:34 lin

しかし、このビジネスロジックで、共有/親コントローラを1つ使用するか、工場で通信する2つのコントローラを使用するのが問題ですか？ – SoftTimur

アプリケーションの仕様によって異なります。私は2つのコントローラを使用し、冗長性を避けるためにすべての共有機能を工場に入れます。このようにして、複数のコントローラで使用されているロジックは素晴らしい工場で処理され、コントローラはまだ原子配列です。 – lin

レイアウトの切り替えをテンプレートの変更のみにしたいので、私は共有コントローラを1つ優先したいと思います。コントローラの後ろに他のものを変更したくないのですが... – SoftTimur

nestedビューを使用する必要があります。親ルート状態でメインコントローラを定義し、2つのビューに対応する2つのネスト状態を定義できます。この方法では、親コントローラは残っています（子ステートが切り替わるときに再初期化されません）。ネストされたステートビューのみが変更されます。このような何か：

$stateProvider 
    .state('myState', { 
    url: '/test/', 
    template: '<div ui-view></div>', 
    controller: function() { 
     //main controller shared by child states 
     ... 
    } 
    }) 
    .state('myState.view1', { 
    url: '/test/view1' 
    templateUrl: 'tpl-1.hmtl', 
    ... 
    }) 
    .state('myState.view2', { 
    url: '/test/view2' 
    templateUrl: 'tpl-2.hmtl', 
    ... 
    })

出典

2017-02-19 16:14:02

あなたはより精巧ていただけますか？私が避けたいのは、同じテンプレート内に2つのビューを定義し、レイアウトの選択に応じて** HIDE **を定義することです。私は** HIDE **のアイデアが気に入らない。 – SoftTimur

@SoftTimurアップデートの回答をご覧ください。 –

2つのレイアウトを同じ$スコープで共有する

答えて

関連する問題