使兩個佈局共享相同的$範圍

我想爲我的內容提出兩種佈局（即，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請參閱更新回答。 –

使兩個佈局共享相同的$範圍

回答

相關問題