AngularJS具有共享逻辑设计模式的多个视图

I'm using ui-router and my layout is divided into 2 ui-views, side-bar and main content

我正在使用ui-router,我的布局分为2个ui-views,side-bar和main内容

the side-bar offers options that changes the main content model (altering values, setting filters) and that's a problem because as far as I understand they can never share same controller (instance)

侧栏提供了更改主要内容模型的选项(更改值,设置过滤器),这是一个问题,因为据我所知,他们永远不能共享同一个控制器(实例)

at this point there are two solutions I'm considering, 1. Working with one view moving the sidebar into the main view that way they will reside within a single controller instance, It's a bit ugly but still a solution 2. communicate between controllers with a messaging, invoking whatever needed in that disconnected matter

在这一点上,我正在考虑两种解决方案,1。使用一个视图将侧边栏移动到主视图中,它们将驻留在单个控制器实例中,它有点难看但仍然是解决方案2.控制器之间进行通信一个消息传递,调用那个断开连接的事物所需要的东西

I don't like neither of those solutions, I'll be happy to get your design proposals

我不喜欢这些解决方案,我很乐意得到您的设计方案

current routing def example (mind that same layout is common for my application and in used repeatedly:

当前路由def示例(请注意,相同的布局对于我的应用程序是常见的并且反复使用:

$stateProvider.state('home', {
                url: "/home",
                views: {
                    main: {               
                        templateUrl:"homeTemplate.html",
                        controller: "HomeController"
                    },
                    sidebar: {templateUrl: "homeSidebarTemplate.html"}
                }
            })

1 个解决方案

#1

Take a look at angular services

看看角度服务

You can use them for these purposes. A service is a singleton in which you can share data between any module. Put your data into the service and use it as a model in your main view and side bar.

您可以将它们用于这些目的。服务是一个单例,您可以在其*享任何模块之间的数据。将您的数据放入服务中,并将其用作主视图和侧栏中的模型。

For example:

angular.module('myApp.someNamespace', [])
  .factory('someService', function () {

  var service = {};
  service.myList = {1,2,3};
  service.myMenu = {'apples', 'oranges', 'pears'}

  service.addToList = function(number) {
   service.myList.push(number);
  }
  return service;
});

inject this service into your controller and sidebar directive:

将此服务注入您的控制器和侧边栏指令:

angular.module('myApp.myControllers', [])
    .controller('myCtrl', function ($scope, someService) {

    $scope.model = someService;
});

In your view bind to your service variables/methods:

在您的视图中绑定到您的服务变量/方法:

<div ng-repeat="number in model.myList">
   <input type="number" ng-model="number"/>
</div>
<input type="number" ng-model="newNumber"/>
<button ng-click="model.addToList(newNumber)">Add</button>

Another advantage of using this pattern is that your views will stay where you were when navigating back and forth (more stateful), because it gets the data from your singleton service. Also you'd only need to get the data from your api once (until you refresh your browser ofcourse).

使用此模式的另一个好处是,您的视图将保持在前后导航(更有状态)的位置,因为它从您的单例服务获取数据。此外,您只需要从api获取一次数据(直到刷新浏览器的话)。

#1