Angular directive to toggle sidebar visibility based on window width
Yes, you're right. Your code is very hard to read.


I think you don't need that init stuff. Just remove it and add initialization to the controller.
You don't need jQuery for your directive. This is possible with Angular JS / pure Js. Use ng-show or ng-if for showing hiding your sidebar and use ng-class to add your class conditionally depending on a variable from your controller to do things differently for large screens.
Animation could be done with ngAnimate and animate.css.


There are some points that could be improved in my code:


Add options so it's better reusable.
Add default options for example start visible = false. with angular.module('adminApp').constants(...) then you can angular.extend(...) these in the controller of your directive.
Add an isolated scope for the directive so it can't modify the scope of your app. Somthing like scope: {} would be OK or {scope: { options: '@' } } for the sidebar options. 
Remove restrict: M because it's not recommended to use directives as comments (see angular docs).


Please have a look at the demo below or in this jsfiddle.



function EventSidebarDirective($window) {
    var directive = {
        restrict: 'EAM',
        templateUrl: 'components/sidebar/template.html',
        controllerAs: 'ctrl',
        controller: function ($scope) {
            var self = this, // self needed because toggle is not bound to this ctrl.
             screenWidth;
                    
            angular.extend(this, {
             visible: false,
             toggle: function () {
                    screenWidth = $window.innerWidth; //$(window).width();
                    self.visible = !self.visible; // toggle visibility
                    self.largeScreen = ( screenWidth &gt;= 768 );
    }
            });
        },
        link: function (scope, element, attr, ctrl) {
     
        }
    };

    return directive;
}

EventSidebarDirective.$inject = ['$window']; // only need with-out ng-annotate for minification

angular.module('adminApp', ['ngAnimate'])
    .directive('eventSidebar', EventSidebarDirective);
.sidebar-content {
    width: 200px;
    height: 200px;
    background: lightgray;
}

.sidebar-content-animation.ng-hide-remove {
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    -ms-animation: fadeInLeft 1s;
    -o-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}

.sidebar-content-animation.ng-hide-add {
    -webkit-animation: fadeOutUp 1s;
    -moz-animation: fadeOutUp 1s;
    -ms-animation: fadeOutUp 1s;
    -o-animation: fadeOutUp 1s;
    animation: fadeOutUp 1s;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet"/&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.js"&gt;&lt;/script&gt;

&lt;div ng-app="adminApp"&gt;
    &lt;script type="text/ng-template" id="components/sidebar/template.html"&gt;
        &lt;div class="sidebar-content" 
             ng-show="ctrl.visible" 
             ng-class="{'sidebar-content-animation': ctrl.largeScreen}"&gt;
            I'm a sidebar
        &lt;/div&gt;
        &lt;a href="#" ng-click="ctrl.toggle()"&gt;toggle sidebar&lt;/a&gt;
    &lt;/script&gt;
    &lt;event-sidebar&gt;&lt;/event-sidebar&gt;
&lt;/div&gt;