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
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  
</head>
<body ng-app="TestApp">
  <div ng-controller="TestController">
    <h2>{{message}}</h2>
    <input type="country" ng-model="name"/>
  </div>
</body>
</html>
 
var app = angular.module("TestApp",[]);
​
app.controller("TestController", function($scope){
  $scope.message = "Input Directive Test"
});
​
app.directive("input", function() {
  return {
    restrict: "E",
    link: function(scope, elem, attr) {
      if(attr.type === "country") {
        var select = angular.element("<select><option>USA</option></select>");
        elem.replaceWith(select);        
      }
    }
  }
});
​
// app.directive("input", function() {
//   return {
//     restrict: "E",
//     replace: true,
//     template:"<select><option>USA</option></select>"
//   }
// });
​
​
Output

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

Dismiss x
public
Bin info
kalyanampro
0viewers