0

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

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

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

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

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

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

1 回答 1

1

看看角度服务

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

例如：

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 获取数据一次（直到您刷新浏览器）。

于 2015-07-06T07:39:50.697 回答