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:
JS FILE:
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">M
<div class="drawer-tab-lines"><
<!--<div class="tab-triangle" />-->
</div>
</div>
in above code vm is some controller.
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>
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();
}
});
});
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">M
<div class="drawer-tab-lines"><
<!--<div class="tab-triangle" />-->
</div>
</div>
in above code vm is some controller.
AngularJavaScriptjQueryWeb DevelopmentScripting Languages
Last Comment
Dinesh Kumar
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.
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
Looks like IE11 isn't supported. That doesn't explain IE10.
I'll do some testing
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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.
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:
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>
ASKER
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
</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.
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
</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.
ASKER
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.$ev
$rootScope.$digest();
});
}
};
}]);
but it does not track if drawer is open only then close it, it always close it
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.$ev
$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
</div>
Remove the "data" from before the directives
ASKER
@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
ASKER
you mean one after another, they should execute?
ng-click is doing lot more other things..
ng-click is doing lot more other things..
Yes that's right. Let me know how it goes without the data prefix
ASKER
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'
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you.