AngularJS: In-Place Prompt Widget

Developer
Anand Thakker
Size
3,053 Kb
Views
12,144
  1. AngularJS: In-Place Prompt Widget Previews
  2. AngularJS: In-Place Prompt Widget HTML Codes
  3. AngularJS: In-Place Prompt Widget JS Codes

How do I make an angularjs: in-place prompt widget?

A simple AngularJS widget for an in-place prompt. The button first reveals the text input (and focuses it). Clicking the button again fires the "done" callback. Typing the enter key also fires the "done" callback, and the escape key re-hides the text input.. What is a angularjs: in-place prompt widget? How do you make a angularjs: in-place prompt widget? This script and codes were developed by Anand Thakker on 21 December 2022, Wednesday.

AngularJS: In-Place Prompt Widget Previews
IQ Test

AngularJS: In-Place Prompt Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS: In-Place Prompt Widget</title>
</head>
<body> <html> <body ng-app="myApp"> <h1>A simple AngularJS widget for an in-place prompt.</h1> <p>
The button first reveals the text input (and focuses it). Clicking the button again fires the "done" callback. Typing the enter key also fires the "done" callback, and the escape key re-hides the text input. </p> <div ng-controller="myCtrl"> <prompt-button model="foo" done="finished = true;" placeholder="Type..."> Click me </prompt-button> <div ng-show="finished"> Finished! {{foo}} </div> </div> </body>
</html> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS: In-Place Prompt Widget - Script Codes JS Codes

(function() { angular.module("prompt-button", []).directive("promptButton", function($log, $timeout) { return { restrict: 'E', template: "<div class=\"prompt-button\">\n <input ng-model=\"model\" ng-show=\"promptOpen\" type=\"text\" placeholder=\"{{placeholder}}\">\n <button type=\"button\" ng-click=\"click()\">\n <div ng-transclude></div>\n </button>\n</div>", replace: true, transclude: true, scope: { model: "=", done: "&", placeholder: "@" }, link: function(scope, element, attr) { var cancel, finish, start; start = function() { scope.promptOpen = true; scope.click = finish; element.find('input').bind('blur', function() { return scope.$apply(function() { return cancel(); }); }); return $timeout(function() { return element.find('input')[0].focus(); }); }; cancel = function() { scope.promptOpen = false; return scope.click = start; }; finish = function() { scope.promptOpen = false; scope.click = start; scope.done(); return console.log("done."); }; element.bind('click', function() { return scope.$apply(function() { if (!scope.promptOpen) { return scope.click(); } }); }); element.find('input').bind('keyup', function(e) { return scope.$apply(function() { if (e.which === 13) { return scope.click(); } else if (e.which === 27) { return cancel(); } }); }); scope.click = start; scope.promptOpen = false; return scope.placeholder != null ? scope.placeholder : scope.placeholder = ""; } }; }); angular.module("myApp", ["prompt-button"]).controller("myCtrl", function($scope) { return $scope.foo = "Foo!"; });
}).call(this);
AngularJS: In-Place Prompt Widget - Script Codes
AngularJS: In-Place Prompt Widget - Script Codes
Home Page Home
Developer Anand Thakker
Username anandthakker
Uploaded December 21, 2022
Rating 3
Size 3,053 Kb
Views 12,144
Do you need developer help for AngularJS: In-Place Prompt Widget?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anand Thakker (anandthakker) Script Codes
Name
Simple canvas drawing -- simplified lines
AngularJS responsive multi-range slider
Experimenting with SVG Patterns
A Pen by Anand Thakker
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!