Я делаю форму данных, и часть ее требует, чтобы у нее была кнопка, чтобы добавить еще одну строку вопросов и другую кнопку, чтобы удалить соответствующую строку. Надеюсь, я просто что-то пропустил, и это простое решение, но если мне придется реорганизовать любой код, я это сделаю. Проблема, с которой я столкнулась, заключается в том, что когда вы нажимаете "Добавить стек", она добавляет новую строку вопросов точно так, как предполагалось, но когда вы нажимаете "Удалить стек", ничего не происходит. Из различных методов отладки я обнаружил, что проблема возникает из-за того, что кнопка удаления сгенерирована, и если бы я должен был поставить строку, которая сначала загружает страницу, она работает так, как она должна была. Я также хотел бы отметить, что для отладки кнопки удаления просто выводится "тест" на консоль вместо фактического удаления строки.

Соответствующие файлы:

app.js

/*global angular*/

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

app.config(['$routeProvider', function ($routeProvider) {
    'use strict';

    $routeProvider.when('/', {
        templateUrl: 'html/home.html'
    }).otherwise({
        redirectTo: '/'
    });

}]);

app.controller('MainController', function ($scope, $http) {
    'use strict';

    $http.get('json/data.json').then(function (response) {
        $scope.data = response.data;
    });

    $scope.change = function (item) {
        return item + '-changed';
    };
});

app.directive('removeStackButton', function() {
    return {
        link: function(scope, element) {
            scope.removeStack = function() {
                console.log("test");
            }
        }
    }
});

app.directive('addStackButton', ['$http', function($http) {
    return {
        link: function(scope, element) {
            scope.addStack = function() {
                $http.get('html/stack.html').then(function (response) {
                    var row = $compile(response.data)(scope);
                    element.parent().parent().prepend(row);
                });
            }
        }
    }
}]);

stack.html

<div class="form-group">
    <div class="form-group">
        <div class="row">
            <div class="col-xs-4">
                <label for="stacks_totes">Totes:</label>
                <select name="stacks_totes[]" class="form-control">
                    <option value="0" selected="selected">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
            </div>
            <div class="col-xs-4">
                <label for="capped_stack">Cap:</label>
                <select name="capped_stack[]" class="form-control">
                    <option value="0" selected="selected">No cap</option>
                    <option value="1">Cap w/o litter</option>
                    <option value="2">Cap w/ litter</option>
                </select>
            </div>
            <div class="col-xs-4">
                <label for="cap_height">Cap height:</label>
                <select name="cap_height[]" class="form-control">
                    <option value="0" selected="selected">(No cap)</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-xs-12">
                <button class="btn btn-danger btn-block btn-sm ng-scope" remove-stack-button ng-click="removeStack()">Delete Stack</button>
            </div>
        </div>
    </div>
    <hr/>
</div>

home.html

<div>
    <form>
        <fieldset>
            <legend>Stacks</legend>
            <div class="form-group">
                <div class="form-group">
                    <button class="btn btn-block" add-stack-button ng-click="addStack()">Add Stack</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="vendor/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="vendor/jquery-2.1.4/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="vendor/angular-1.4.4/angular.min.js"></script>
    <script type="text/javascript" src="vendor/angular-1.4.4/angular-route.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>


<body ng-controller="MainController">

    <ng-include src="'html/navbar.html'"></ng-include>
    <ng-view></ng-view>
</body>