front end group start

by gion_13

HTML

<div ng-app="jsGroup">
    
 <div class="hero-unit" ng-controller="userController">
		<p>
			Salut! Ma numesc <span contenteditable="true" ng-model="user.name">Portiera Mitrut</span> si vreau sa imi aprofundez cunostintele de <span class="del">javascript</span> front end.
		</p>
		<p>
            In viata mea de programator lucrez <span contenteditable="true" ng-model="user.howMuch">cat de cat</span> pe front end si vreau sa imi aprofundez in special cunostintele de <span contenteditable="true" ng-model="user.languageToImprove">js/html(? sau poate css)</span>.
		</p>
		<p>
			Lucrul cel mai intens cu {{user.languageToImprove}} de pana acum a fost la <span contenteditable="true" ng-model="user.mostIntenseProject">{{user.mostIntenseProject}}</span>, unde am facut <span contenteditable="true" ng-model="user.tasks">{{user.tasks}}</span>. Partea cea mai grea a fost <span contenteditable="true" ng-model="user.hardestTasks">{{user.hardestTasks}}</span>. Proiectul asta ({{user.mostIntenseProject}}) m-a ajutat sa invat <span contenteditable="true" ng-model="user.learned">{{user.learned}}</span>.
		</p>
		<p>
			Pe langa {{user.languageToImprove}} ma mai intereseaza si <span contenteditable="true" ng-model="user.secondLanguage">{{user.secondLanguage}}</span>. Chiar daca <span contenteditable="true" ng-model="user.secondLanguageExperiments">{{user.secondLanguageExperiments}}</span> am avut ocazia sa am joc putin cu {{user.secondLanguage}}, ma atrage <span contenteditable="true" ng-model="user.secondLanguageAttraction">{{user.secondLanguageAttraction}}</span>. Nu, despre <span contenteditable="true" ng-model="user.hatedLanguage">{{user.hatedLanguage}}</span> nu prea vreau sa aud pentru ca <span contenteditable="true" ng-model="user.hatedLanguageReason">{{user.hatedLanguageReason}}</span>.
		</p>
		<p>
			Ca sa inchei, am venit aici ca sa invat {{user.languageToImprove}} si poate putin {{user.secondLanguage}}. Obiectivul meu este <span contenteditable="true"...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }
  div[contentEditable] {
      cursor: pointer;
      background-color: #D0D0D0;
    }

.del{
    text-decoration : line-through;
}

JavaScript

angular.module('jsGroup', [])
.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      // view -> model
      elm.bind('blur keydown keyup', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(elm.text());
        });
      });

      // model -> view
      ctrl.$render = function() {
        elm.text(ctrl.$viewValue);
      };

      // load init value from DOM
      ctrl.$setViewValue(elm.text());
    }
  };
})
.controller('userController', function($scope){
    $scope.user = {
    };
});