Angular+JQ+Bootstrap

by maxisam

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    <h1 edit="editMe == true" ng-dblclick="editMe = !editMe" ng-model="message">{{message}}</h1>
    {{editMe}}
</div>

JavaScript

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.message = 'hello';
}
app.directive('edit', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            //Input: shown when editing
            var editingElm = $compile('<input type="text" ng-model="'+attrs.ngModel+'" ng-show="'+attrs.edit+'">')(scope);       
            //Put element's contents into a  new span, which is hidden while editing            
            var contentWrapper = $compile('<span ng-hide="'+attrs.edit+'"></span>')(scope);
            //take element's contents out of dom and stick them into our contentWrapper
            var contents = elm.contents().remove().appendTo(contentWrapper);
            
            elm.append(contentWrapper).append(editingElm);
        }
    };
});