Question

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

（这里我的两个指令在div中称为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'

 };
});

（以及views / new-input.html）

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

我的目标是当我点击按钮时，我希望在这个例子中添加一个新的div：

如果我点击一次，我会

<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>

动态添加一个带有ng-click的指令

1 个答案: