如何在HTML的div标签中添加jQuery Knob组件？附现有代码

Adding jQuery Knob to Your AngularJS App #

Here's a step-by-step, Angular-friendly guide to integrate the jQuery Knob component into your existing index.html:

Step 1: Include the jQuery Knob Library

First, add the jQuery Knob script to your page. Since you already have jQuery included, place the Knob script after the jQuery tag in your <head> section. Make sure you’ve downloaded the library (save it as jquery.knob.js in your project folder) first:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.knob.js"></script> <!-- Add this line -->
<script src="app.js"></script>

Step 2: Add the Knob Container Div

Inside your <body> (within the ng-controller="GameController" scope), add a <div> for the knob. Use data attributes to set basic configurations like min/max values, starting value, and appearance:

<body ng-app="Myapp" ng-controller="GameController">
  <!-- Your existing content here -->
  
  <!-- Knob container with basic settings -->
  <div class="knob" data-min="0" data-max="100" data-value="50" data-angleArc="270" data-angleOffset="-135"></div>
  
  <!-- Rest of your content -->
</body>

Step 3: Initialize the Knob (Best Practice: Custom Directive)

Direct DOM manipulation in Angular controllers is not recommended. Instead, create a custom directive to wrap the knob initialization—it plays nicely with Angular’s lifecycle and keeps your code organized:

In your app.js, add this directive:

angular.module('Myapp', [])
.controller('GameController', function($scope) {
  // Your existing controller logic here
})
.directive('jqueryKnob', function() {
  return {
    restrict: 'C', // Target elements with the "knob" class
    link: function(scope, element) {
      // Initialize the knob
      $(element).knob({
        // Optional: Override data attribute settings here
        change: function(value) {
          // Sync knob value with Angular scope
          scope.$apply(function() {
            scope.knobValue = value;
          });
        }
      });

      // Optional: Update knob when scope value changes
      scope.$watch('knobValue', function(newVal) {
        $(element).val(newVal).trigger('change');
      });
    }
  };
});

Alternative: Quick Test Initialization (Not for Production)

If you just want to test the knob quickly, use $timeout in your controller to wait for the DOM to load before initializing:

angular.module('Myapp', [])
.controller('GameController', function($scope, $timeout) {
  $timeout(function() {
    $('.knob').knob({
      change: function(value) {
        $scope.knobValue = value;
        $scope.$apply();
      }
    });
  });
});

Key Tips: #

• Load Order Matters: The Knob script must come after jQuery—otherwise, it won’t recognize the jQuery object.
• Customize Appearance: Use data attributes like data-fgColor, data-bgColor, data-width, or data-height to tweak the knob’s look.
• Scope Sync: The directive example ensures the knob’s value stays in sync with your Angular scope, which is critical for two-way data binding.

内容的提问来源于stack exchange，提问作者Himanshu Upadhyay