Где разместить меню при использовании угловой привязки?

Я использую snap.js с AngularJS, используя директиву angular-snap.js. https://github.com/jtrussell/angular-snap.js Где разместить меню при использовании угловой привязки?

Я также использую угловую навигацию Энди Хослина.

мне интересно, где я должен хранить код меню:

<snap-drawer> 
    <p>I'm a drawer! Where do I go in the angular code?</p> 
</snap-drawer>

Потому что это не единственная страница в угловом-подвижной нав, я в настоящее время помещая на каждой странице и просто используя директиву, содержащую весь мой код меню/html.

Похоже, что это может быть неэффективно, поскольку он загружает новую директиву на каждую страницу, не так ли? Любая идея о том, как сделать это лучше?

Спасибо!

источник

2013-07-13 Hawk

Я не использую 'snap.js', а некоторую самописную боковую директиву. Я поместил HTML для него в файл index.html ('

'). Я получаю данные боковой панели из текущей области с помощью '$ route.current.locals. $ Scope'. И используя 'ng-repeat', я могу отобразить содержимое боковой панели (список). Я не знаю, работает ли это, но вы можете попытаться создать директиву вокруг 'snap.js' (директива begin: P). – AndreM96

Спасибо за комментарий! Я попытался поставить боковую панель в индекс, но он не играл хорошо, когда обернулся вокруг , поскольку анимация перехода просто не выглядела гладкой, потому что мое меню было вне директивы , где происходит вся анимация. – Hawk

Так что это то, что я сделал (я также использую angular-mobile-nav и angular-snap.js).

Это мой HTML код

<body ng-app="MyApp"> 
    <div snap-drawer> 
     <ul class="list"> 
      <li ng-repeat="item in sidebar.items" ng-i18next="{{item.name}}" ng-tap="snapper.close();go(item.link)"></li> 
     </ul> 
    </div> 

    <div id="container" snap-content snap-options="snapOpts"> 
     <div mobile-view=""></div> 
    </div> 
</body>

Пожалуйста, обратите внимание, что go() функция для изменения страницы и что я использую ng-i18next перевести мои детали. Также ng-tap - это директива, которая прослушивает события касания вместо событий мыши. С Angular> 1.1.5 есть мобильный модуль, поэтому моя директива ng-tap больше не понадобится.

И с помощью $rootScope я могу поставить элементы на боковой панели:

$rootScope.sidebar = { 
    items: [ 
     { 
      name: 'item_one', 
      link: 'page_one' 
     }, 
     ... 
    ] 
};

Так что если вы хотите, чтобы изменить элементы на боковой панели, просто переопределить $rootScope.sidebar (не $scope.sidebar) в контроллере;)

Если вам не нравятся две анимации одновременно, вы можете написать функцию, ожидающую закрытия боковой панели, а затем изменение страницы. Это может выглядеть так:

$rootScope.waitThenGoTo = function (page, time) { 
    time = time || 200; 
    $timeout(function() { 
     $navigate.go(page); 
    }, time); 
};

Если у вас есть вопросы, просьба прокомментировать. Я постараюсь как можно скорее обновить этот ответ.

источник

2013-08-02 09:51:10 AndreM96

Это работает, но я просто не мог заставить анимацию выглядеть гладко. Немного изменчив, когда он сначала закрывает меню привязки, затем переходит на следующую страницу. Мне нужно принять решение о том, нужен ли мне более плавный опыт за счет включения HTML-меню на каждую «страницу». Если у вас есть идеи о том, как сделать переход очень плавным, пожалуйста, дайте мне знать. В любом случае, действительно оцените предложение. – Hawk

Да, это не выглядит так гладко.:/Вы можете попытаться изменить код, поэтому, когда боковая панель закрывается, содержимое по-прежнему «приклеивается» к границе боковой панели. Это означает, что анимация должна быть синхронизирована, а это не так просто. Вы также можете попытаться изменить страницу, а затем закрыть боковую панель. Я этого не пробовал, но я дам вам знать, найду ли я решение. ;) – AndreM96

Где разместить меню при использовании угловой привязки?

ответ

Смежные вопросы