使两个布局共享相同的$范围

我想为我的内容提出两种布局（即，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被复位到它们的初始值。我希望他们的textarea的变化将保持不变，而不管布局的变化。

有谁知道如何解决这个问题？

来源

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个控制器，并将所有共享功能放入工厂以避免冗余。用这种方法，你在多个控制器中使用的逻辑被封装在一个漂亮的工厂中，而你的控制器仍然是atomar。 – 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 **。我不喜欢** HIDE **的想法。 – SoftTimur

@SoftTimur请参阅更新回答。 –

使两个布局共享相同的$范围

回答

相关问题