AngularJS-从另一个指令创建元素后，指令链接功能不会触发

Question

I'm making a data form and part of it requires that it have a button to add another row of questions and another button to delete it's corresponding row. Hopefully I've just overlooked something and it's a simple fix, but if I have to reorganize any code I will. The problem I'm having is that when you click Add Stack it adds a new row of questions exactly like it's supposed to, but when you click Delete Stack nothing happens. From various methods of debugging I've found that the problem stems from the fact that the delete button is generated, and if I were to put a row that loads initially with the page it works just like it's supposed to. I would also like to point out that for the purposes of debugging the delete button just prints "test" to the console instead of actually deleting a row.

The relevant files are as following:

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>

Answer 1

To address your comment of ng-repeat , you should create a model and work off that instead of the DOM. Chuck your stackForm into a directive. See plunker Eg:

app.controller('MainCtrl', function ($scope, $http) {
    // The stackList is your model. Work off this list instead.
    $scope.stackList = [];

    $scope.addStack = function() {
      $scope.stackList.push({});
    };

    $scope.removeStack = function(stack) {
      var stackIdx = $scope.stackList.indexOf(stack);
      if (stackIdx > -1) {
        $scope.stackList.splice(stackIdx, 1);
      }
    };
});

And in your markup:

  <button class="btn btn-block" ng-click="addStack()">Add Stack</button>
  ...
  <div data-ng-repeat="stack in stackList track by $index">
    <div data-stack="stack" data-remove-stack="removeStack(stack)"></div>
  </div>