dbtek / angular-aside Goto Github PK

Currently ng-aside is not working on a corodova latest version.
angular js 1.3

throws compile error.

Hi ,

I have the menu working on my local the problem that i am having is the menu comes all the way from the end of the window screen and i want it to come from a div or the container in which i have my content. let me know if there is a way you can help me with this,

Thanks
Grinish

Great extension to the $modal service. Can you please add the counter animation to the current animation you have in place?

Thanks again for this!

Hello,
I'm using gulp-angular yeoman generator to build an angular app with the options of . I tried using ngAside but ran into an issue where it wouldn't load because it's looking for explicit annotation of $modal. I do not call modal anywhere else. Any idea how this can be fixed? Here's the error below from firefox.

"Error: [$injector:strictdi] function($modal) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.4.7/$injector/strictdi?p0=function(%24modal)
minErr/<@http://localhost:3000/bower_components/angular/angular.js:68:12
annotate@http://localhost:3000/bower_components/angular/angular.js:3747:1
invoke@http://localhost:3000/bower_components/angular/angular.js:4456:21
enforcedReturnValue@http://localhost:3000/bower_components/angular/angular.js:4330:20
invoke@http://localhost:3000/bower_components/angular/angular.js:4478:14
createInjector/instanceCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4295:20
getService@http://localhost:3000/bower_components/angular/angular.js:4437:39
invoke@http://localhost:3000/bower_components/angular/angular.js:4469:1
instantiate@http://localhost:3000/bower_components/angular/angular.js:4486:27
$ControllerProvider/this.$get</<@http://localhost:3000/bower_components/angular/angular.js:9151:18
$ViewDirectiveFill/<.compile/<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4018:28
invokeLinkFn@http://localhost:3000/bower_components/angular/angular.js:8789:9
nodeLinkFn@http://localhost:3000/bower_components/angular/angular.js:8289:1
compositeLinkFn@http://localhost:3000/bower_components/angular/angular.js:7680:13
publicLinkFn@http://localhost:3000/bower_components/angular/angular.js:7555:30
updateView@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3959:23
$ViewDirective/directive.compile/</<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3921:11
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:3000/bower_components/angular/angular.js:16311:15
transitionTo/$state.transition<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3311:11
processQueue@http://localhost:3000/bower_components/angular/angular.js:14745:28
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:14761:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:15989:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:15800:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:16097:13
done@http://localhost:3000/bower_components/angular/angular.js:10546:36
completeRequest@http://localhost:3000/bower_components/angular/angular.js:10744:7
requestLoaded@http://localhost:3000/bower_components/angular/angular.js:10685:1
" "

Hi, This is a great library. Worked like a charm. The only problem is the modal comes in from the upper right down to the left. Is it possible for it to slide smooth from the right to the left, for example?

Thanks!

In order for this plugin to work with webpack and npm it needs to know about the css. The easiest way I found is to require it in the index.js like this:

require('./dist/css/angular-aside.css');
require('./dist/js/angular-aside');
module.exports = 'ngAside';

If I change:

$aside.open({
size: 'sm',
})

to

$aside.open({
size: 'lg',
})

There is a change when I open the aside on my desktop. However, If I open the aside on a mobile device or a small screen, the aside is the same size when sm is selected, as it is when large is selected

Thank you for this very useful lightweight mod of ui $modal. Is there anyway one can attach the modal to a container and not the whole body of the document? Sort of like how AngularStrap does.

I am using angular-aside plugin in phonegap app. I am facing flickering issue when aside open & close specifically on ios devices only. In android it is working fine.

Is there a way to have a modal on top of the Aside. When I try and click a modal it opens below the aside.

Hello,
Thank you very much for this great library.
Actually, I'm using the aside libraray to open a form (insert, update a list of items).
I'm wondering if there is way to catch the closing event of the aside in ordre to refresh my origin list.
something like: modalInstance.result.then
thank you in advance.

The service does not use inline annotations and therefore breaks when minified.

Hi @dbtek , great job.

I'm trying to use this library, but if I include directives in the templateUrl content- the side menu is empty.
The directive I'm trying to use in the templateUrl content is Accordion which is part of the augular-ui library.
any help will be great.
Idanb11

I don't know if the intended behaviour of "Ok" and "Cancel" buttons in your aSide demo is to close the sidebar, but they do not close it... How can I programmatically force the closure of the aside sidebar (using a button, for instance, and not clicking outside the sidebar...)?

When using the folllowing css rule for the body class,
.modal-open.left { padding-left: 320px; }
the body moves 320 px to the right but the body content shrinks by 320 px, which looks bad on small screens. The left side of the body does not slide over the border of the html document.

How to slide the body to the side withouth shrinking the body?

I'm trying to drop elements from the modal to the background. Is there any way to achieve this?

It'd be great if this supported angular-bootstrap 0.13.0. It was released recently and it's the first version that supports upgrading from angular 1.2 to 1.3/1.4.

1. Open plunker link in firefox.
2. Open your aside component.

Result:
Popup displayed with no effect.

Expected
A slide effect must be present.

When you have content that is too large for the modal the content simply runs of the end instead of having a vertical scroll bar.

I have updated your demo plunker to demonstrate the issue:
http://plnkr.co/edit/S6rRlw99hPgoNTZZ9Ds3?p=preview

Using angular-aside generates warnings with the 0.14.x versions of angular-bootstrap due to the usage of $modal. (It should be refactored to use the prefixed $uibModal.)

not work. Nothing happens when you click on the items.

Is there anyway to attach a button to the menu. So instead of the page having a button that opens the off-canvas panel, user can click on the button that moves with the panel. Like an open and close button.

I have a navigation hierarchy that I am trying to show in the aside panel, but the problem is every time the aside opens it refreshes the controller and thus the scope is not maintained, for my use case I want to show user his current position in hierarchy. Is there any way I can accomplish this using Aside?

Hi

I have a problem where the modal left menu opens but immediately closes. Funny enough when I click on the link and hold the modal appears and stays. Please assist

Here is my code

$scope.openAside = function (position) {
$aside.open({

                                   templateUrl: 'aside.html',
                                   placement: position,
                                   backdrop: true,
                                   controller: function ($scope, $modalInstance) {
                                       $scope.ok = function (e) {
                                           $modalInstance.close();
                                           e.stopPropagation();
                                       };
                                       $scope.cancel = function (e) {
                                           $modalInstance.dismiss();
                                           e.stopPropagation();
                                       };
                                   }
                               });
                           };

Hello,

I was wondering if it was possible to have multiple HTML in template URL? Or do I have to create a different controller for each one.

I am running into the following error:

• I open a modal on an iPhone4 (for example, any iOS device is affected)
• I display a list with buttons that extends over the end of the screen -> I have to scroll down

Now:

Any element that is initially visible can be clicked and the modal view is updated
Any element that is initially NOT visible can be clicked, the modal view is NOT update (e.g. a button stays selected), but if I console.log the click as well it does happen.

Any idea? It only happens when I use $aside. Using the standard $modal lets me click on scrolled elements. I think it has to do with the overflow, but I havent found a workaround yet

I'm using this on Rails 4 and I fixed the minification dependency injection problem that is a standard for angular, but it still doesn't work for $aside

Error: [$injector:unpr] Unknown provider: eProvider <- e <- $aside

At times the modal translates along the Y axis and renders the bottom of the modal in the center of the browser.

For some reason the fadeOut animation no longer works.

The example can be also seen in the demo plunker.

I would like to be able to have an overlay cover the remaining screen portion when the aside opens. When the aside closes, then the overlay should also disappear. Is this feature request something that seems doable? Does it already exist and I'm just unaware? Would I be able to fork this repository and attempt to create this functionality? Thanks!

I'm trying to use angular-aside with heroku and rails 4, and I'm getting the above error in production. I assume angular-aside is breaking during minification.

I am using the 'ngannotate-rails' gem, which to date has fixed all other similar errors. However, it doesn't appear to work in this case. I know ngannotate-rails, by default, does not process files in /vendor, but I have attempted to remove this default.

#production.rb
  config.ng_annotate.ignore_paths = [

  ]

Any suggestions? Thank you.

I have a couple of feature requests for ng-aside:

1. Allow the inside side to be optionally resizeable, ideally with a custom bit of HTML to act as a handle. For example, if the aside is anchored to the right side then the left has a widget to allow of resizing horizontally. The template could have a aside-resize-handle section to act as the anchor for the interaction.
2. I would love if there could be an option where the underlying content behind the aside (the main page) was still able to be interacted with. I understand that having based the implementation on the modal, might present some inherent difficulties, but it would be a great option to have.

Thanks!

In my aside menu I have a vertical accordion, so the "close" button sometimes (when some item is opened) is visible and sometimes it's not. So I rely on backdrop: true to let user close my aside menu.
On desktop it works great, but on small mobiles (up to at least a width of 640px) it doesn't, since the aside menu fills ut the screen...
Can you suggest a solution, or even just a loophole :-) ?

Consider that on small screens, with a crowded accordion item open, a close button on the bottom of the aside menu should be usually out of view.

ui-bootstrap-tpls-0.13.0.js ile çalışırken animasyon ile açılan yan panel, kapanırken animasyonsuz birden kapanıyor. ui-bootstrap-tpls-0.12.1.js ile bu problem yok.

Hi, any chance you could publish this module to npm?

It should be as simple as adding this to your package.json:

...
browser: "dist/js/angular-aside.js",
style: "dist/css/angular-aside.css",
...

and then running npm publish.

Thanks!

Ho can I hide the aside modal on mouse leave event ?

"aside-open" should be added to <body> when the aside is opened so that it can be used to shift the content when the aside is opened (force over by the aside). It would be awesome if that was an option on the $aside.open() method call.

Hey looks like Gulp Build proccess is breaking this module - any ideas why?

I get this when triggering the menu:

Error: [$injector:unpr] Unknown provider: eProvider <- e http://errors.angularjs.org/1.6.4/$injector/unpr?p0=eProvider%20%3C-%20e Stack trace: t/<@http://huyu.co/js/angularlibs.js:1:425 pt/y.$injector<@http://huyu.co/js/angularlibs.js:1:23050 r@http://huyu.co/js/angularlibs.js:1:21959 pt/S<@http://huyu.co/js/angularlibs.js:1:23133 r@http://huyu.co/js/angularlibs.js:1:21959 i@http://huyu.co/js/angularlibs.js:1:22264 s@http://huyu.co/js/angularlibs.js:1:22650 Ot/this.$get</<@http://huyu.co/js/angularlibs.js:2:17513 e.$get</p.open/d<@http://huyu.co/js/angularlibs.js:10:8776 l@http://huyu.co/js/angularlibs.js:3:6535 c/<@http://huyu.co/js/angularlibs.js:3:6957 $digest@http://huyu.co/js/angularlibs.js:3:12588 $apply@http://huyu.co/js/angularlibs.js:3:14400 compile/</<@http://huyu.co/js/angularlibs.js:5:21558 dispatch@http://huyu.co/js/nonangularlibs.js:2:17665 add/g.handle@http://huyu.co/js/nonangularlibs.js:2:14373 Possibly unhandled rejection: {}

Thanks.

Even after using the latest version I get the following message in the console.

How to use state.go plz...
without using templateUrl