AngularJS Несколько представлений с общим логическим шаблоном проектирования

Question

Я использую UI-маршрутизатор и мой макет делятся на 2 Ui-представление, боковое-бар и основной контент

сторона-бар предлагает варианты, которые изменяют основное содержание (изменяя значения, устанавливая фильтры), и это проблема, поскольку, насколько я понимаю, они никогда не могут использовать один и тот же контроллер (например)

В этом пункте есть два решения, которые я рассматриваю, 1. Работа с одним видом перемещая боковую панель в основной вид, таким образом, они будут находиться внутри одного экземпляра контроллера. Это немного уродливое, но все же решение 2. связь между контроллерами с помощью messagi нг, ссылаясь на то, что нужно в этом вопросе отключенного

мне не нравится ни один из этих решений, я буду рад получить ваши предложения дизайна

текущего пример четкости маршрутизации (ум того же макет является общим для мое приложение и использовать повторно:

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

Другой Преимущество использования этого шаблона в том, что ваши взгляды будут оставаться там, где вы были, когда (больше состояния), потому что он получает данные из вашего сервиса singleton. Также вам нужно будет только один раз получить данные из своего api (пока вы не обновите свой браузер).