Link to home
Start Free TrialLog in
Avatar of Dinesh Kumar
Dinesh KumarFlag for India

asked on

angular-snap.js drawer not working in IE

I am trying angular snap as mentioned in http://embed.plnkr.co/iB8VfD/

but in my project the following code is written:

HTML FILE:

<div data-ng-controller="sCtrl as vm">
    
    <div  class="full-view">
        <snap-drawer data-ng-class="{'open' : vm.isDrawerOpen}">
            <!--Some file path-->
        </snap-drawer>
        <snap-content snap-options="vm.options">
           <!--Some content-->
        </snap-content>

    </div>
</div>

Open in new window



JS FILE:

(function () {
    'use strict';

    var controllerId = 'sCtrl';

    angular.module('app').controller(controllerId,
        ['$rootScope', '$scope','snapRemote', shell]);

    function shell($rootScope, $scope, snapRemote) {

        var vm = this;
snapRemote.getSnapper().then(function (snapper) {
            snapper.on('open', function () {
                vm.isDrawerOpen = true;

                $scope.$broadcast('menuOpen');
            });

            snapper.on('close', function () {  //THIS FUNCTION IS NOT CALLING IN IE10,IE11 so drawer does not get closed
                vm.isDrawerOpen = false;

                if (!$scope.$$phase) {
                    $scope.$digest();
                }
            });
        });

Open in new window

PROBLEM:

in above code, the following is working for chrome but not in IE 10, IE11

snapper.on('close', function () {  //THIS FUNCTION IS NOT CALLING IN IE10,IE11 so drawer does not get closed
                vm.isDrawerOpen = false;

                if (!$scope.$$phase) {
                    $scope.$digest();
                }
            });

Please help!

may be helpful: https://github.com/jakiestfu/Snap.js

To make it more simpler:

I want to close the drawer when following div is clicked:

    <div class="drawer-tab {{vm.metId}} " data-ng-click="vm.openDrawer('met')">
            <div class="full-view drawer-tab-label-wrapper">
                <div class="drawer-tab-label">Met</div>
                <div class="drawer-tab-lines"></div>
                <!--<div class="tab-triangle" />-->
            </div>
        </div>
in above code vm is some controller.
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

not a solution, but.. for what it's worth.. I have also tried using snapjs and it does not appear to be compatible with IE.
Avatar of Rob
https://github.com/jakiestfu/Snap.js/blob/develop/README.md#support

Looks like IE11 isn't supported. That doesn't explain IE10.

I'll do some testing
SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Dinesh Kumar

ASKER

I have two  options to fix this:

1) the code in question, the following is working for chrome but not in IE 10, IE11

snapper.on('close', function () {  //THIS FUNCTION IS NOT CALLING IN IE10,IE11 so drawer does not get closed
                vm.isDrawerOpen = false;

                if (!$scope.$$phase) {
                    $scope.$digest();
                }
            });

if I can make this work OR

2) if you can help in creating a directive which does the following thing
    Close the left menu(drawer) if that is open otherwise do nothing.

    seems  the second option is similar to ngToggle directive already built in angular-snap but having a slight change.
I confused.  Why are you not just using the same markup to open and close the drawer?  I need more to go on.

In other words, why isn't your code this:

<snap-drawers>
      <snap-drawer>
        <p>Hello from drawer!</p>
      </snap-drawer>
      
      <div snap-drawer="right">
        <p>Hello from the right drawer!</p>
      </div>
    </snap-drawers>

Open in new window

yes.. that the problem with already written  code and the problem is to fix them!!

Desired Action: so let us say I have  another button or DIV on the same page and if that when clicked should close the drawer if that is open otherwise do nothing. ( this can help me)

<div data-ng-click="vm.open('me')" data-snap-toggle>
        </div>

so e.g. in above code data-snap-toggle is directive provided by angular-snap.js similar way we can create custom directive that will do the Desired Action.
e.g. there is already build a directive:

angular.module('snap')
  .directive('snapClose', ['$rootScope', 'snapRemote', function($rootScope, snapRemote) {
    'use strict';
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.bind('click', function() {
          // Wrap in anonymous function for easier testing
          snapRemote.close(scope.$eval(attrs.snapId));
          $rootScope.$digest();
        });
      }
    };
  }]);

but it does not track if drawer is open only then close it, it always close it
<div ng-click="vm.open('me')" snap-toggle>
        </div>

Remove the "data" from before the directives
@Rob:  do you think its  correct to  use two directives here one is ng-click and another is snap-toggle(or snap-close) as both seems to handle click event.
They should be chainable so it shouldn't matter but if they do the same thing then remove the ng-click
you mean one after another, they should execute?

ng-click is doing lot more other things..
Yes that's right. Let me know how it goes without the data prefix
both with data prefix and without data, its working.

only difference I see is that without data, when I hover on snap-close, my application is giving unknown attribute 'snap close'
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you.