Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html ng-app="OCV5">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/lib/angular-ui/build/angular-ui.js"></script>
  
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/lib/angular-ui/build/angular-ui.css"/>
<script>
var availableTags = ["ActionScript","AppleScript","Asp"];
​
//by jquery
$(document).ready(function(){
    $( ".autocomplete" ).autocomplete({
      source: availableTags
    });
    $( ".datepicker" ).datepicker();
});
​
​
//by angularjs
var myApp = angular.module('OCV5', ['ui']);
myApp.directive('uicomplete', function($http) {
       return function(scope, element, attrs) {
               element.autocomplete({
                  source: ["ActionScript","AppleScript","Asp"]
               });
       }
    });
  myApp.directive('directivedate', function($http) {
       return function(scope, element, attrs) {
          element.datepicker();
       }
    });
function testcontroller($scope,$http)
{
    $scope.test=function()
    {
        console.log("being called");
    }
}
</script>
</head>
<body>
​
Note:<br/>
1.Please onpen your console to view info<br/>
2.Autocomplete please type "a"<br/>
========================================================<br/>
<div>
    <p>by jquery</p>
            jquery datepicker<input type="text" class="datepicker" /><br />
            jqeury auto complete<input type="text"  class="autocomplete" /><br />
</div>
========================================================<br/>
<div ng-controller="testcontroller">
    <p>Datepicker by angular ui and directive</p>
    <input type="button" value="test call" ng-click="test()" /><br/>
    by directive<input type="text" directivedate /><br/>
    by angular ui<input type="text" ui-date /><br/>
    <input type="button" value="test call" ng-click="test()" /><br/>
    ng-model--testvariable<input type="text" ng-model="testvariable"/>{{testvariable}}
</div>
========================================================<br/>
<div ng-controller="testcontroller">
    <p>Autocomplete by angular directive</p>
    <input type="button" value="test call" ng-click="test()" /><br/>
    autocomple :<input type="text" uicomplete />    <br/>
    <b>problem at here:</b>after directive, this button cant be call<input type="button" value="test call" ng-click="test()" /><br/>
    <input type="button" value="test call" ng-click="test()" /><br/>
    ng-model--testvariable<input type="text" ng-model="testvariable"/>{{testvariable}}
</div>
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
stupidfrogpro
0viewers