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" instance="slid" min="0" max="max" value="val" slide="slideFn" />
    </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 widgetConfig = {
        slider: {
            value: 'getter',
            values: 'getter',
            min: 'setter',
            slide: 'callback',
            enable: 'action',
            disable: 'action'
        }
    };
    
    function buildWidget (config) {
        
    }
    
    return {
        restrict: 'A',
        //scope: true,
        link: function link($scope, $element, $attrs, $ctrl) {
            console.log($attrs);
            
            var widget = $attrs.jqui,
                options = {};
            
            angular.forEach($attrs, function(value, attr) {
                var fn;
                
                if (attr.match(/^[^\$]/)
                        && attr != 'jqui'
                        && attr != 'instance'
                        && attr != 'max')
                {
                    value = $scope.$eval(value);
                    if (angular.isFunction(value)) {
                        fn = value;
                        value = function () {
                            fn.apply({}, arguments);
                            $scope.$apply();
                        }
                    }
                    
                    options[attr] = value;
                }
            });
                
            if (angular.isDefined($attrs.instance)) {
                $scope[$attrs.instance] = $element;
            }
                
            $scope.$watch($attrs.max, function(value) {
                $element.slider('option', 'max', value);
            });
            
            console.log(options);
            
            $element[widget](options);
        }
    };
}]);

function ctrl($scope) {
    $scope.slideFn = function(event, ui) {
        $scope.val = ui.value;
        //console.log("executed! " + ui.value + " - " + $scope.val);
    };
    
    $scope.val = 1;
    
 ...