UPDATE: view the demo on Plunker: https://embed.plnkr.co/fHPQfbUQ1lvZBJsDNQR5/
An issue arises when I try to include my directive in my HTML code, triggering an error:
"http://errors.angularjs.org/1.5.6/$parse/syntax?p0=%7B&p1=invalid%20key&p2=17&p3=updateTypeZone(%7B%7Bcount%7D%7D)&p4=%7Bcount%7D%7D"This is a snippet of my controller:
connectItApp.controller('Inputcontroller',['$scope','$http', '$compile' , function($scope, $http, $compile) {
$scope.count = 1;
$scope.addInput = function(){
angular.element(document.getElementById('box')).append($compile("<new></new>")($scope));
$scope.count++;
}
$scope.updateTypeZone = function (concernedId) {
/*some stuff */
}]);
In this section, two directives are defined within a div using Inputcontroller as the controller:
connectItApp.directive('champText', function(){
return{
restrict: 'E',
template: '<button type="button" class="btn btn-default btn-lg btn-block" ng-click="addInput()" >'+
'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span style="margin-left:10px;">Text</span>'+
'</button>'
};
});
connectItApp.directive('new', function($compile){
return{
restrict: 'E',
templateUrl: 'views/new-input.html'
};
});
The content of views/new-input.html is shown below:
<div ng-click='updateTypeZone({{count}})'>toto</div>
The goal is to append a new div in response to clicking the button, creating a sequence like this:
First click results in:
<div id="box"><div ng-click='updateTypeZone(1)'></div></div>
Second click results in:
<div id="box"><div ng-click='updateTypeZone(1)'></div><div ng-click='updateTypeZone(2)'></div></div>
And so on...
If you have any insights on resolving this issue, please let me know.