ImdbController

by Bretto

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />

<body ng:controller="ImdbController">
<div jq:slider></div>
<input id="amount" />
    {{years}}
</body>

JavaScript

function ImdbController() {
    this.years = "1950";
    
}
angular.directive('jq:slider', function() {
    return function(elm) {
      var currentScope = this;
      elm.slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                currentScope.years = ui.values[0];            
                currentScope.$apply();
            }
        });
    };
});