두 개의 레이아웃이 동일한 $ 범위를 공유하도록하십시오.

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

, 상기 코드는 우리가 뷰를 변경할 때마다 함께 $scope.one 및 $scope.two은 초기 값으로 리셋된다. 레이아웃 변경에 관계없이 텍스트 영역의 변경 사항이 유지되기를 바랍니다.

누구든지 해결 방법을 알고 있습니까?

출처

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

하지만이 비즈니스 로직이 하나의 공유/상위 컨트롤러 또는 공장에서 통신하는 두 컨트롤러를 사용해야한다면 질문은 무엇입니까? – SoftTimur

응용 프로그램 사양에 따라 다릅니다. 저는 2 개의 컨트롤러를 사용하고 중복성을 피하기 위해 모든 공유 기능을 하나의 공장에 두었습니다. 그런 식으로 여러 컨트롤러에서 사용되는 논리가 멋진 팩토리에서 처리되고 컨트롤러가 여전히 원 자성입니다. – lin

하나의 공유 컨트롤러를 선호합니다. 왜냐하면 템플릿 사이의 전환 만 바꾸고 싶기 때문에 다른 것들 (예 : 컨트롤러)이 변경되기를 원하지 않습니다 ... – SoftTimur

나는 전망이 nested이어야한다고 생각한다. 부모 루트 상태에서 주 컨트롤러를 정의하고 두보기에 해당하는 두 개의 중첩 된 상태를 정의 할 수있다. 이 방법은 부모 컨트롤러 (자식 상태가 전환 될 때 다시 초기화되지 않음) 상태로 유지되며 중첩 된 상태보기 만 변경됩니다. 이런 식으로 뭔가 :

$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

좀 더 자세히 설명해 주시겠습니까? 한 가지 피하고 싶은 것은 (같은 것을 모르지만) 같은 템플릿에 두 개의 뷰를 정의하고 레이아웃의 선택에 따라 ** 숨기려고하는 것입니다. 나는 ** HIDE **라는 생각을 좋아하지 않는다. – SoftTimur

@SoftTimur 업데이트 답변을 참조하십시오. –

두 개의 레이아웃이 동일한 $ 범위를 공유하도록하십시오.

답변

관련 문제