Динамически добавить директиву с нг-клик внутри

Question

EDIT: plunker: https://embed.plnkr.co/fHPQfbUQ1lvZBJsDNQR5/

У меня проблема, когда я добавляю свою директиву в моем HTML, у меня есть сообщение об ошибке:

"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", когда я нажимаю на кнопка.

мой код: (здесь мой контроллер)

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 */ 
}]); 

(здесь мои две директивы они называются в сНу ведьмой, как Inputcontroller в качестве контроллера)

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' 

}; 
}); 

(и здесь мнения/новый- input.html)

<div ng-click='updateTypeZone({{count}})'>toto</div> 

Моя цель состоит в том, когда я нажимаю на кнопку, я хочу, чтобы новый DIV добавить в как го является Exemple:

Если я нажимаю один раз, у меня будет

<div id="box"><div ng-click='updateTypeZone(1)'></div></div> 

Если я нажимаю второй раз, у меня будет

<div id="box"><div ng-click='updateTypeZone(1)'></div><div ng-click='updateTypeZone(2)'></div></div> 

и т.д ..

Я не» я знаю, как я могу решить свою проблему.

Answer 1

Помните, что ваше мнение - это просто представление вашего контроллера. Вместо добавления html в dom вручную вы просто добавили бы его в свой шаблон с помощью ng-repeat и настроили контроллер.

var app = angular.module("app", []); 
 

 
app.controller('myController', function($scope) { 
 
    $scope.count = 0; 
 
    $scope.add = function() { 
 
    $scope.count += 1; 
 
    }; 
 
    $scope.range = function() { 
 
    var input = []; 
 
    for (var i = 0; i <= $scope.count; i++) { 
 
     input.push(i); 
 
    } 
 
    return input; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app = "app" ng-controller="myController"> 
 
    <button ng-click="add()">add</button> 
 
    <ul> 
 
    <li ng-repeat="n in range()">listing {{ n }}</li> 
 
    </ul> 
 
</div>