Question

我已经看过同一主题的这篇文章： Dynamically add directive in AngularJS

但在我的情况下，我不太熟悉角度来使用这个解决方案。

在我的情况下，我试图在按下按钮后动态地将指令（基于外部html）添加到div：

        <div class="charges" id="charges">
            <my-headcharges></my-headCharges>
            <my-charges></my-charges>

        </div>

你可以看到我的div有两个指令，我创建并放在div硬编码下。现在我想添加相同的指令，但是多次按下按钮后。

谢谢：）

Answer 1

您可以使用ng-repeat

＆＃13;

var myApp = angular.module("myApp", []);
myApp.controller("myController", ["$scope",
  function($scope) {
    $scope.items = []
    $scope.addTimes = function() {
      $scope.items.push({
        name : new Array(7).join().split(',').map(function(it){return String.fromCharCode(Math.floor(Math.random() * (122 - 97 + 1)) + 97)}).join("")
        });
    };
  }
]);

＆＃13;

<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="myController">
    <button ng-click="addTimes()">Add</button>
    <div class="charges" ng-repeat="item in items">
      <my-headcharges>Hello {{item.name}}</my-headCharges>
      <my-charges></my-charges>
    </div>
</body>

</html>

＆＃13;

如何在按钮单击上动态添加指令

1 个答案: