{"id":3047,"date":"2017-08-14T14:46:47","date_gmt":"2017-08-14T09:16:47","guid":{"rendered":"https:\/\/code4developers.com\/?p=3047"},"modified":"2018-04-10T19:39:06","modified_gmt":"2018-04-10T14:09:06","slug":"apply-mcustomscrollbar-using-angular-directive","status":"publish","type":"post","link":"https:\/\/code4developers.com\/apply-mcustomscrollbar-using-angular-directive\/","title":{"rendered":"Apply mCustomScrollbar using Angular Directive"},"content":{"rendered":"<h2 id=\"ngcustomscrollbar\"><strong>ngCustomScrollbar<\/strong><\/h2>\n<p>Directives are very well-known in the world of angular developers. Every developer knows the power of a\u00a0<strong>Directive<\/strong>. AngularJS has already provided many inbuilt directives which we are using on daily basis.<\/p>\n<h2 id=\"why-custom-scroll-bars-are-useful\"><strong>Why custom scroll bars are useful?<\/strong><\/h2>\n<p><!--more--><\/p>\n<p>Browser default scroll bar are not so good to see while adjusting them with our web applications theme. So to remove that many of us takes the help of custom scroll bars. We all are familiar with the <a href=\"http:\/\/manos.malihu.gr\/jquery-custom-content-scroller\/\" target=\"_blank\" rel=\"noopener\">jQuery mCustomScrollbar<\/a>.<\/p>\n<h2 id=\"why-we-have-created-directive-for-custom-scroll-bar\"><strong>Why we have created directive for custom scroll bar?<\/strong><\/h2>\n<p>We all know that DOM manipulation in our controller file is a very bad habit while working with angular. That&#8217;s why we have created a directive for this so that we can avoid DOM manipulation.<\/p>\n<p><strong>Mandatory file list for using this directive?<\/strong><\/p>\n<p>Before using this directive one has to inject the below listed files in applications.<\/p>\n<ul>\n<li>jQuery.js<\/li>\n<li>jquery.mCustomScrollbar.js<\/li>\n<li>jquery.mCustomScrollbar.css<\/li>\n<li>mCSB_buttons.png<\/li>\n<li>angular.js<\/li>\n<li>ngCustomScrollbar.js <strong>(This is our directive file)<\/strong><\/li>\n<\/ul>\n<p><strong>How to implement this directive in your web applications?<\/strong><\/p>\n<p>One needs to inject the module in their applications module app.<\/p>\n<pre><code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">var myMCustomScrollBarDemo = angular.module('myMCustomScrollBarDemo', ['ngMCustomScrollBar'])<\/code>;<\/pre>\n<p>After following all of the above steps one can now use this directive as an attribute in application.<\/p>\n<p>Below is the code by which one can declare the directive.<\/p>\n<pre><code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;body data-ng-app=\"myMCustomScrollBarDemo\" data-ng-controller=\"controllername\"&gt;<\/code><\/pre>\n<p>Using ng-m-custom-scroll<\/p>\n<pre><code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div class=\"content\" ng-m-custom-scroll&gt;<\/code><\/pre>\n<p>By writing above code in your HTML one can see the custom scroll bar.<\/p>\n<p>In this directive user can also set the properties for the custom scroll bar, <strong>For e.g.\u00a0 like theme and other properties.<\/strong><\/p>\n<p><strong>1) ng-scroll-config<\/strong><\/p>\n<p>In this attribute user can pass the angular object in this <strong>&#8220;ng-scroll-config&#8221;<\/strong> attribute by which this custom scroll bars properties can be applied.<\/p>\n<pre><code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div class=\"content\" ng-m-custom-scroll ng-scroll-config=\"configScroll\" ng-custom-scroll-id=\"DivData1\" ng-custom-scroll-class=\"\"&gt;<\/code><\/pre>\n<p>OR<\/p>\n<pre><code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div class=\"content\" ng-m-custom-scroll ng-scroll-config=\"configScroll\" ng-custom-scroll-id=\"\" ng-custom-scroll-class=\"abc\"&gt;<\/code><\/pre>\n<p>In Controller one has to set the properties like below<\/p>\n<pre><code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$scope.configScroll = { scrollButtons: { enable: false }, theme: \"dark\", live: \"once\" };<\/code><\/pre>\n<p>Using the above one can set the id\/class in ng-custom-scroll-id\/ng-custom-scroll-class\u00a0 property on which one has to apply the custom scroll bar. Just like id one can pass the class name as well. If one wants to apply\u00a0 this directive on custom id\/class this option is useful. In above code the custom scroll bar will not apply on the div which contains the ng-m-custom-scroll attribute, but on that element which is written in the <strong>&#8220;ng-custom-scroll-id\/ng-custom-scroll-class&#8221; <\/strong>option.<\/p>\n<p>You can find this ngcustomscrollbar file in my <a href=\"https:\/\/github.com\/pawanIngale\/ngCustomScrollbar\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> account.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ngCustomScrollbar Directives are very well-known in the world of angular developers. Every developer knows the power of a\u00a0Directive. AngularJS has already provided many inbuilt directives which we are using on&hellip;<\/p>\n","protected":false},"author":8,"featured_media":2560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[25,54,53],"powerkit_post_featured":[],"class_list":{"0":"post-3047","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angularjs","8":"tag-angularjs","9":"tag-customscrollbar","10":"tag-directive"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-N9","jetpack-related-posts":[{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":3047,"position":0},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3097,"url":"https:\/\/code4developers.com\/angularjs-10-best-practices-create-custom-directives\/","url_meta":{"origin":3047,"position":1},"title":"AngularJS &#8211; 10 Best Practices to Create Custom Directives","author":"Arif Khoja","date":"September 2, 2017","format":false,"excerpt":"This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment\/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is listed the best practices for creating custom directives: Naming Convention: Prefer\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3222,"url":"https:\/\/code4developers.com\/improving-the-performance-of-angular-js-code-by-learning-the-basics-of-ng-repeat\/","url_meta":{"origin":3047,"position":2},"title":"How to optimize the performance of ng-repeat in AngularJS?","author":"Arif Khoja","date":"February 7, 2018","format":false,"excerpt":"Today we would focus on improving the performance of Angular JS code by learning the basics of ng-repeat and then how to enhance its capabilities. ng-repeat :-\u00a0 It is directive which create instant of template for each item in the collection. It is identical to looping concept in any language\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":3047,"position":3},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2845,"url":"https:\/\/code4developers.com\/8-useful-guidelines-and-filters-for-angularjs\/","url_meta":{"origin":3047,"position":4},"title":"8 Useful Guidelines and Filters for AngularJS","author":"Arif Khoja","date":"July 3, 2017","format":false,"excerpt":"While working with AngularJS one often requires some guidelines and filters, which greatly simplify the development process and add responsiveness to interface. Many of them are quite trivial and demand access to search engines. Most of them can be found by a quick search, but I put together in one\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2613,"url":"https:\/\/code4developers.com\/ui-routing-basics\/","url_meta":{"origin":3047,"position":5},"title":"UI-Routing &#8211; Basics","author":"Arif Khoja","date":"June 17, 2017","format":false,"excerpt":"Introduction In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3047"}],"version-history":[{"count":6,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3047\/revisions"}],"predecessor-version":[{"id":3075,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3047\/revisions\/3075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3047"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}