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

Question

我正在使用 ui-router，我的布局分为 2 个 ui-视图、边栏和主要内容

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

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

我不喜欢这两种解决方案，我很乐意收到您的设计建议

当前路由定义示例（请注意，相同的布局对我的应用程序很常见，并且重复使用：

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

在您看来绑定到您的服务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>

使用此模式的另一个优点是，您的视图将在来回导航时保持原样（更有状态），因为它从您的单例服务获取数据。此外，您只需要从 api 获取数据一次（当然，直到您刷新浏览器）。

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

AngularJS Multiple views with shared logic design pattern

multiple-views

angularjs

angular-ui-router