Using AngularJS ui router breaks behaviour of custom bootstrap theme

Question

I'm using AngularJS UI router in an HTML5 application with a custom Bootstrap theme bought from Themeforest. The issue is that this theme has some components that rely on both the href, data-toggle and data-dismissal attributes and UI Router breaks them. For example:

<a href="#offcanvas-map-tools" class="link" data-toggle="offcanvas">Show</a>

Would show an off-canvas component when being cliked.

How can i configure AngularJS UI router as to avoid breaking the behaviour of this theme's Components?

I fail to see how a router has anything to do with HTML and CSS markup. All the router does is changing the template/controller based on the URL. — JB Nizet
– JB Nizet, Commented Nov 10, 2015 at 22:57
It does since by default angular ui router interprets all href attributes with '#' in them as routes for its navigation configutation. This overrides the default behaviour that the theme component uses, since this same behaviour is on Bootstrap. — fturizo
– fturizo, Commented Nov 10, 2015 at 23:03
Ah, so it's not really the theme, but the JavaScript code that comes with it. And it's not really the router, but the standard location service. Try using the html5 mode. Or use a programmatic approach rather than an approach relying on data attributes and element IDs. This doesn't fit well with angular. — JB Nizet
– JB Nizet, Commented Nov 10, 2015 at 23:11
Yes exactly, the theme works but the javascript behaviour of its components get messed up. I'll try to see if a programmatic approach is possible. Exactly, what do you mean by using the html5 mode? — fturizo
– fturizo, Commented Nov 10, 2015 at 23:24

fturizo · Accepted Answer · 2015-11-11 20:24:23Z

I ended up implementing this custom directive to handle the theme's javascript behaviour using the theme's Javascript API:

app.directive('offcanvasToggler', function(){
    return {
        restrict : 'E',
        transclude: true,
        scope : {
            target: '@',
            backdrop : '=useBackdrop'
        },
        templateUrl : 'directives/toggle-offcanvas.html',
        link: function($scope, $element){
            var anchor = $element.find('a');
            anchor.on('click', function(event){
                event.preventDefault();
                materialadmin.AppOffcanvas._handleOffcanvasOpen(anchor);
            });
        }
    };
});

Collectives™ on Stack Overflow

Using AngularJS ui router breaks behaviour of custom bootstrap theme

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related