editable shit

angular cms.js service

window.app.factory("CMS", function(Global, $resource) {
    var _this = this;
    _this.content = {};

    _this.content["index"] = {
        en: {
            signupbutton: "sign up now",
            signuptext: "for more info",
            picsign: "Your free 10 days trip to Israel starts here",
            whatstitle: "What's it all about?",
            whatsp1: "If you're Jewish and between the ages of 18 and 26, Birthright Israel offers you the once in a lifetime opportunity to join on of their legandary free 10 days trip to Israel. Here's how it works...",
            whatsp2: "Taglit-Birthright Israel is funded by Jewish philanthropists whose goal is to give every young Jew the opportunity to see and  experience the Land of Israel."
        },
        he: {
            signupbutton: "sign up now",
            signuptext: "for more info",
            picsign: "Your free 10 days trip to Israel starts here",
            whatstitle: "What's it all about?",
            whatsp1: "If you're Jewish and between the ages of 18 and 26, Birthright Israel offers you the once in a lifetime opportunity to join on of their legandary free 10 days trip to Israel. Here's how it works...",
            whatsp2: "Taglit-Birthright Israel is funded by Jewish philanthropists whose goal is to give every young Jew the opportunity to see and  experience the Land of Israel."
        }
    };
    
    return {
        get: function(id, callback) {
          if(!_this.content[id] || !_this.content[id][Global.lang]) throw "CMS Get | View Not Found";
        	else callback(_this.content[id][Global.lang]);
        },
        update: function(id, content, callback) {
        	if(!_this.content[id] || !_this.content[id][Global.lang]) throw "CMS Update | View Not Found";
        	else {
        		// execute a resource to a articles clone.
        		 console.log(_this.content[id]); 
        		var srv =  $resource('cms/update/:page',  
        			{ page: _this.content[id] } , {  //basically I'm passing this object to the server
        			update: {
            			method: 'PUT'
        			}
    			});
    			srv.update();
    			console.log(srv);
        		_this.content[id][Global.lang] = content;
        		callback(_this.content[id][Global.lang]);
        	}
        }
    }
});

angular directives.js

window.app.directive('ngBlur', function($parse) {
    return function(scope, element, attrs) {
        element.bind('blur', function(){
            scope.$eval(attrs.ngBlur);
        });
    };
});

window.app.directive('ngFocus', function($parse) {
    return function(scope, element, attrs) {
        element.bind('focus', function(){
            scope.$eval(attrs.ngFocus);
        });
    };
});

window.app.directive('ngEnter', function() {
  return function(scope, elm, attrs) {
		elm.bind('keypress', function(e) {
			if(e.charCode === 13) scope.$apply(attrs.ngEnter);
		});
	};
});

window.app.directive('ngEditable', function() {
  return {
		// can be in-lined or async loaded by xhr
		// or inlined as JS string (using template property)
		template: '<span class="editable-wrapper">' +
					'<span data-ng-hide="edit" data-ng-dblclick="edit=true;value=model;">{{model}}</span>' +
					'<input type="text" data-ng-model="value" data-ng-blur="blurred();" data-ng-show="edit" data-ng-enter="model=value;edit=false;"/>' +
				'</span>',
		scope: {
			model: '=ngEditableModel',
			update: '&ngEditable'
		},
		replace: true,
		link: function(scope, element, attrs) {
			scope.focus = function() { element.find("input").focus(); };
			scope.blurred = function() { scope.$apply(function() { scope.edit = false; }); };
			
			scope.$watch('edit', function(isEditable) {
				if(isEditable === false){
					scope.update(); //here (I think) :)
				}
				else {
					scope.focus();
				}
			});
		}
	};
});

index.js controller

function IndexController($scope, Global, CMS) {
    $scope.init = function() { //cms get 
      CMS.get("index", function(content) {
    		$scope.content = content;
    	});
    }
    
    $scope.update = function(){
    	CMS.update("index", $scope.content, function(content) {
    		$scope.content = content;
    	});
    }
}

node controller

/**
 * Module dependencies.
 */

var mongoose = require('mongoose'),
    async = require('async'),
    CMS = mongoose.model('CMS'),
    _ = require('underscore');

exports.item = function(req, res, next, id) {
    var cms = mongoose.model(CMS);

    CMS.load(id, function(err, item) {
        if (err) return next(err);
        if (!item) return next(new Error('Failed to load item ' + id));
        req.item = item;
        next();
    })
}

/**
 * Create a article
 */
exports.create = function(req, res) {
    var article = new Article(req.body)
    article.user = req.user
    article.save()
    res.jsonp(article)
}

/**
 * Update a article
 */
exports.update = function(req, res) {
  console.log(req.body);
	console.log(req.url);
	res.send('xx');

   /* var article = req.article
    article = _.extend(article, req.body)

    article.save(function(err) {
        res.jsonp(article)
    })
*/

}

/**
 * Delete an article
 */
exports.destroy = function(req, res) {
    var article = req.article
    article.remove(function(err) {
        if (err) {
            res.render('error', {
                status: 500
            });
        } else {
            res.jsonp(article);
        }
    })
}

/**
 * Show an article
 */
exports.show = function(req, res) {
    res.jsonp(req.article);
}

top part of angular index.html view

<section data-ng-controller="IndexController" data-ng-init="init()" data-ng-show="content">
    <div class="picture">
        <div class="signup-button-wrapper">
            <a class="signup-button" href="#!/signup">
                <span class="signup-title">{{content.signupbutton}}</span> 
                <span class="signup-text">{{content.signuptext}}</span>
            </a>
        </div>
        <div class="pic-sign">{{content.picsign}}</div>
    </div>
    <div class="text-content">
        <div class="left-text-content">
            <h5 class="purple-title">{{content.whatstitle}}</h5>
            <p class="text-container">
                <span data-ng-editable="update()" data-ng-editable-model="content.whatsp1"></span>
            </p>
            <br/>
            <p class="text-container">
                {{content.whatsp2}}
            </p>
        </div>