が動的に

Question

EDIT内NG-クリックでディレクティブを追加し、私はをクリックして

"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"：https://embed.plnkr.co/fHPQfbUQ1lvZBJsDNQR5/

私は私のhtmlで私のディレクティブを追加するとき、私は問題を抱えて、私はエラーを持っていますボタン。

私のコード：（ここでは私のコントローラ）

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

（ここでは私の2つのディレクティブこれらはコントローラとしてInputcontrollerとしてのdiv魔女に呼ばれている）

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に同様のth exempleです：

私は1時間をクリックすると、私は私が二度目にクリックした場合、私は

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

などがあります

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

を持っています。..

私はドン」私は自分の問題をどのように解決できるかを知っています。

Answer 1

あなたのビューはコントローラーの単なるメモです。 domに手動でhtmlを追加する代わりに、テンプレートに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>