AngularJS - Sortable
by Felipe Alfaro
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<level-one>
<level-two>
<level-three>
Content
</level-three>
</level-two>
</level-one>
JavaScript
const App = angular.module('MyApp', []);
App.controller({
'Main': MainController
});
App.directive({
'levelOne': levelOneDirective,
'levelTwo': levelTwoDirective,
'levelThree': levelThreeDirective,
});
MainController.$inject = [];
function MainController() {
const self = this;
}
levelOneDirective.$inject = [];
function levelOneDirective() {
return {
restrict: 'E',
template: function (tElement) {
console.log('template / level 1');
return tElement[0].innerHTML;
},
controller: function () {
console.log('controller / level 1');
},
compile: function (){
console.log('compile / level 1');
return {
pre: function () { console.log('pre-link / level 1'); },
post: function () { console.log('post-link / level 1'); }
}
}
}
}
levelTwoDirective.$inject = [];
function levelTwoDirective() {
return {
restrict: 'E',
template: function (tElement) {
console.log('template / level 2');
return tElement[0].innerHTML;
},
controller: function () {
console.log('controller / level 2');
},
compile: function (){
console.log('compile / level 2');
return {
pre: function () { console.log('pre-link / level 2'); },
post: function () { console.log('post-link / level 2'); }
}
}
}
}
levelThreeDirective.$inject = [];
function levelThreeDirective() {
return {
restrict: 'E',
template: function (tElement) {
console.log('template / level 3');
return tElement[0].innerHTML;
},
controller: function () {
console.log('controller / level 3');
},
compile: function (){
console.log('compile / level 3');
return {
pre: function () { console.log('pre-link / level 3'); },
post: function () { console.log('post-link / level 3'); }
}
}
}
}