Question

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

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

此时我有两种解决方案， 1.使用一个视图将侧边栏移动到主视图中，它们将驻留在单个控制器实例中，它有点难看，但仍然是一个解决方案 2.通过消息传递控制器之间进行通信，调用断开连接的任何内容

我不喜欢这些解决方案，我很乐意接受您的设计方案

当前路由def示例（请注意，我的应用程序和重复使用的布局相同：

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

Answer 1

查看angular services

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

例如：

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;
});

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

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

    $scope.model = someService;
});

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

<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>

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

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

1 个答案: