Last active
December 22, 2016 03:41
-
-
Save andrewjmead/5732438 to your computer and use it in GitHub Desktop.
An AngularJs directive for smart inline editing.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* demo app that uses the inline directive */ | |
| var myApp = angular.module('inlineDemo', ['inline']); | |
| myApp.config(function ($routeProvider) {}); | |
| myApp.controller('names', function ($scope) { | |
| console.log('controller'); | |
| $scope.masterName = $scope.name = '46'; | |
| $scope.$watch('name', function (val) { | |
| if ($scope.name != $scope.masterName) { | |
| console.log('http put'); | |
| $scope.masterName = $scope.name; | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>AngularJs Inline Editing</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> | |
| <script src="app.js"></script> | |
| <script src="inline.js"></script> | |
| </head> | |
| <body ng-app="inlineDemo"> | |
| <div ng-controller="names"> | |
| <span inline="name"></span> | |
| <hr/> | |
| <p>What We Know: {{name}}</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * ngInline | |
| * an AngularJs directive for inline editing | |
| * By: Andrew Mead | |
| **/ | |
| angular.module('inline', []).directive('inline', function () { | |
| return { | |
| template: '<span ng-switch on="edit" >' + | |
| '<span ng-switch-default>{{value}}<img class="pencil" src="img/pencil.png"/></span>' + | |
| '<input ng-switch-when="true" type="text" ng-model="$parent.value"/>' + | |
| '</span>', | |
| restrict: 'A', | |
| scope: { | |
| inline: '=' | |
| }, | |
| link: function (scope, element, attribs) { | |
| scope.value = scope.inline; | |
| /* watch for changes from the controller */ | |
| scope.$watch('inline', function (val) { | |
| scope.value = val; | |
| }); | |
| /* enable inline editing functionality */ | |
| var enablingEditing = function () { | |
| scope.edit = true; | |
| setTimeout(function () { | |
| console.log(element.children().children('input')); | |
| element.children().children('input')[0].focus(); | |
| element.children().children('input').bind('blur', function (e) { | |
| scope.$apply(function () { | |
| disablingEditing(); | |
| }); | |
| }); | |
| }, 100); | |
| }; | |
| /* disable inline editing functionality */ | |
| var disablingEditing = function () { | |
| scope.edit = false; | |
| scope.inline = scope.value; | |
| }; | |
| /* set up the default */ | |
| disablingEditing(); | |
| /* when the element with the inline attribute is clicked, enable editing */ | |
| element.bind('click', function (e) { | |
| if ((e.target.nodeName.toLowerCase() === 'span') || (e.target.nodeName.toLowerCase() === 'img')) { | |
| scope.$apply(function () { // bind to scope | |
| enablingEditing(); | |
| }); | |
| } | |
| }); | |
| /* allow editing to be disabled by pressing the enter key */ | |
| element.bind('keypress', function (e) { | |
| if (e.target.nodeName.toLowerCase() != 'input') return; | |
| var keyCode = (window.event) ? e.keyCode : e.which; | |
| if (keyCode === 13) { | |
| scope.$apply(function () { // bind scope | |
| disablingEditing(); | |
| }); | |
| } | |
| }); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment