Angular Directives - Basic

Number input, slider, and gauge.

by Wijmo

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.1.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.1.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<body ng-app="app" ng-controller="myCtrl">
  <h3>Plain HTML</h3>
  <p>Hello, {{name}}. The value is <b>{{value}}</b></p>.
  <p>Edit the name here:
    <input ng-model="name" />
  </p>
  <p>Edit the value here:
    <input ng-model="value" />
  </p>
  
  <h3>Wijmo Controls</h3>
  <table>
    <tr>
      <td>Edit the number here: </td>
      <td><wij-inputnumber value="value" min="0" max="100" /></td>
    </tr>
    <tr>
      <td>Or here: </td>
      <td><wij-slider value="value" min="0" max="100" /></td>
    </tr>
    <tr>
      <td>And see it here:</td>
      <td>
        <wij-gauge
          value="{{value}}"
          fill="red" 
          target-value="50" 
          target-fill="green" />
      </td>
    </tr>
  </table>    
</body>

CSS

/* change Wijmo widgets font to match bootstrap */
 .ui-widget {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* use auto-width for Wijmo menu items */
 .wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child {
    width: auto;
    min-width: 150px;
}
/* custom back color for Wijmo tooltips*/
 .wijmo-wijtooltip {
    background-color: #fff9d1;
}

JavaScript

// the module
var app = angular.module('app', []);

// the controller
app.controller('myCtrl', function ($scope) {
    $scope.name = 'Superhero';
    $scope.value = 60;
});

// some directives:

// wij-inputnumber directive
app.directive("wijInputnumber", function (wijUtil) {
    return {
        restrict: "E",
        replace: true,
        template: "<input>",
        scope: {
            value: "=", // Numeric value editable by the user.
            min: "@", // Minimum acceptable value (defaults to zero).
            max: "@", // Maximum acceptable value (defaults to 1000000000).
            decimalPlaces: "@", // Number of decimal places to show (defaults to zero).
            groupSeparators: "@", // Whether to show thousand separators (defaults to true).
            spinner: "@", // Whether to show spinner buttons (defaults to true).
            increment: "@" // Increment applied by the spinner buttons (defaults to one).
        },
        link: function (scope, element, attrs) {

            // listen to changes in attributes and update the control
            var arr = ["min", "max", "decimalPlaces", "groupSeparators", "spinner", "increment"];
            wijUtil.watchScope(scope, arr, updateControl);

            // update element value when scope changes (no need to re-create widget)
            scope.$watch("value", function (value) {
                element.wijinputnumber({
                    value: value
                });
                //element.val(value); // also works...
            });

            // update the control
            function updateControl() {

                // apply defaults
                wijUtil.setDefVal(scope, "min", 0);
                wijUtil.setDefVal(scope, "max", 1000000000);
                wijUtil.setDefVal(scope, "decimalPlaces", 0);
                wijUtil.setDefVal(scope, "groupSeparators", "true");
                wijUtil.setDefVal(scope, "spinner", "true");
                wijUtil.setDefVal(scope,...