如何通过AngularJS自定义指令初始化jQuery的slimScroll函数？

Converting your document-ready slimScroll setup to an AngularJS directive is the cleanest approach—since directives are designed to handle DOM manipulation in Angular, and they work seamlessly with dynamically loaded elements (something document-ready can miss if elements are added post-page-load). Here's how to implement it step by step:

Prerequisite #

First, ensure jQuery is loaded before AngularJS in your script order. This makes angular.element use jQuery instead of Angular's built-in jqLite, so the slimScroll method will be available on directive elements.

Step 1: Create the Custom Directive #

Define a directive that initializes slimScroll on the target element. We'll use an attribute-based directive for flexibility:

angular.module('yourAppModuleName').directive('slimScroll', function() {
  return {
    restrict: 'A', // Restrict to attribute usage
    link: function(scope, element) {
      // Initialize slimScroll with your desired options
      element.slimScroll({
        alwaysVisible: true
        // Add other slimScroll options here (e.g., height: '300px')
      });
    }
  };
});

Step 2: Apply the Directive to Your Element #

Replace your document-ready code with adding the slim-scroll attribute to the .ams-items element(s):

<div class="ams-items" slim-scroll>
  <!-- Your scrollable content here -->
</div>

Optional: Dynamic Options (If Needed) #

If you want to pass slimScroll options dynamically (e.g., based on scope variables), you can add scope bindings to the directive:

angular.module('yourAppModuleName').directive('slimScroll', function() {
  return {
    restrict: 'A',
    scope: {
      slimScrollOptions: '=' // Bind to a scope object
    },
    link: function(scope, element) {
      // Use the dynamic options, fall back to defaults if needed
      const options = angular.extend({ alwaysVisible: true }, scope.slimScrollOptions);
      element.slimScroll(options);
    }
  };
});

Then use it in your template like this:

<div class="ams-items" slim-scroll slim-scroll-options="{ height: '400px' }">
  <!-- Content -->
</div>

Why This Works Better Than Document Ready #

• Dynamic Elements: If your .ams-items element is loaded asynchronously (e.g., via ng-repeat, routing, or a template), the directive will initialize slimScroll as soon as the element is rendered—something document-ready can't do because it only runs once on page load.
• Encapsulation: All DOM manipulation logic is contained within the directive, following Angular's best practices instead of mixing jQuery with global document-ready callbacks.
• Reusability: You can apply the slim-scroll attribute to any element that needs slimScroll functionality, without repeating code.

内容的提问来源于stack exchange，提问作者diksha khairnar