JSFiddle - React, Tailwind, and code Playground

by redaemn

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<div ng-app="app" ng-controller="ctrl">
    <div>
        <div jqui="slider" min="min" max="max" value="val" />
    </div>
    <div>{{val}}</div>
    <button ng-click="button()">click</button>
</div>

JavaScript

angular.module('app', ['ngUtils']);

angular.module('ngUtils', []).

directive('jqui', ['$parse', function($parse) {
    
    var config = {
        slider: {
            value: 'getter',
            values: 'getter',
            min: 'setter',
            max: 'setter',
            slide: 'callback',
            enable: 'action',
            disable: 'action'
        }
    };
    
    return {
        restrict: 'A',
        //scope: true,
        link: function link($scope, $element, $attrs, $ctrl) {
            console.log($attrs);
            
            var widget = $attrs.jqui,
                options = {};
            
            options.slide = function(event, ui) { $scope.$apply(); };
            
            angular.forEach($attrs, function(value, attr) {
                var type = angular.isDefined(config[widget])
                        ? config[widget][attr]
                        : null,
                    valueGetter,
                    valueSetter;
                
                if (type != null && angular.isDefined(type)) {
                    switch(type) {
                        case 'getter':
                            valueGetter = $parse(value);
                            valueSetter = valueGetter.assign;
                            $scope.$watch(function() {
                                return $element[widget]('option', attr);
                            }, function(newVal) {
                                valueSetter($scope, newVal);
                            });
                            options[attr] = valueGetter($scope);
                            break;
                            
                        case 'setter':
                            $scope.$watch(value, function(newVal) {
                                $element[widget]('option', attr, newVal);
                            });
                            options[attr] = $scope.$eval(value);
                            break;
                    }
      ...