How can I create "div" element inside another "div",and others in the same level dynamically!
[This image shows what I am trying to accomplish] https://i.stack.imgur.com/AQyK7.jpg
The problem is when i want to add "GrianContenu" the console show for me that the function GrainContenu() is undefined but it's work with the "Division".
Can someone help me to add My elements EXACTLY like is shown in the picture.
Here are my app.html, app.js and rightClickDirective.app
app.js
angular.module("Webapp", ["ngSanitize","directive.contextMenu"])
.controller("DivisionCtrl", function($scope) {
$scope.divisions = [{id: 'division1'}];
$scope.addNewDivision = function() {
$scope.divisions.push({id: 'division' + ($scope.divisions.length+1)});
};
})
.controller('GrainContenuCtrl', function($scope) {
$scope.grainContenus = [{'id': 'grainContenu1'}];
$scope.addNewGrainContenu = function() {
$scope.grainContenus.push({'id': 'grainContenu' + ($scope.grainContenus.length+1)});
};
})
.controller('RightClickCtrl', function($scope) {
$scope.clicked = '';
$scope.GrainContenu = function() {
$scope.clicked = $scope.addNewGrainContenu();
};
$scope.Division = function() {
$scope.clicked = $scope.addNewDivision();
};
$scope.QCU = function() {
$scope.clicked = 'link was clicked';
};
$scope.QCM = function() {
$scope.clicked = 'delete was clicked';
};
});
rightClickDirective.js
(function(angular) {
var ngContextMenu = angular.module('directive.contextMenu', []);
ngContextMenu.directive('cellHighlight', function() {
return {
restrict: 'C',
link: function postLink(scope, iElement, iAttrs) {
iElement.find('td')
.mouseover(function() {
$(this).parent('tr').css('opacity', '0.7');
}).mouseout(function() {
$(this).parent('tr').css('opacity', '1.0');
});
}
};
});
ngContextMenu.directive('context', [
function() {
return {
restrict: 'A',
scope: '@&',
compile: function compile(tElement, tAttrs, transclude) {
return {
post: function postLink(scope, iElement, iAttrs, controller) {
var ul = $('#' + iAttrs.context),
last = null;
ul.css({
'display': 'none'
});
$(iElement).bind('contextmenu', function(event) {
event.preventDefault();
ul.css({
position: "fixed",
display: "block",
left: event.clientX + 'px',
top: event.clientY + 'px'
});
last = event.timeStamp;
});
//$(iElement).click(function(event) {
// ul.css({
// position: "fixed",
// display: "block",
// left: event.clientX + 'px',
// top: event.clientY + 'px'
// });
// last = event.timeStamp;
//});
$(document).click(function(event) {
var target = $(event.target);
if (!target.is(".popover") && !target.parents().is(".popover")) {
if (last === event.timeStamp)
return;
ul.css({
'display': 'none'
});
}
});
}
};
}
};
}
]);
})(window.angular);
app.html
<html>
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
</head>
<body ng-app="Webapp" ng-controller="DivisionCtrl">
<h1>Module Opale</h1>
Titre<input type="text" placeholder="Titre"><br />
Metadonnées<input type="text" placeholder="Titre"><br />
Objectif du module<input type="text" placeholder="Objectif">
<div ng-controller="RightClickCtrl" context="context1">
<div class="form-group" data-ng-repeat="division in divisions" ng-controller="GrainContenuCtrl">
<h2>Division</h2>
Titre<input type="text" placeholder="Titre">
<br />Titre court
<input type="text" placeholder="Titre"><br />
<div class="form-group" data-ng-repeat="grainContenu in grainContenus">
<h3>Grain de Contenu</h3>
Titre<input type="text" placeholder="Titre"><br />
Titre court<input type="text" placeholder="Titre"><br />
<h4>Information</h4>
Titre<input type="text" placeholder="Titre"><br />
<textarea rows="4" cols="50"></textarea><br />
</div>
<hr />
</div>
<ul id="context1" class="dropdown-menu">
<li><a ng-click="GrainContenu()">Grain de Contenu</a></li>
<li><a ng-click="Division()">Division</a></li>
<li><a ng-click="QCU()">Exercice:QCU</a></li>
<li><a ng-click="QCM()">Exercice:QCM</a></li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/rightClickDirective.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>
</body>
</html>
