AngularJS指令添加其他不起作用的指令

Question

I am trying to construct a directive that adds form groups to a particular div. I'm attempting doing this by binding a directive to a button in my html. My application is VERY simple as this is all I'm trying to do at the moment. Similar to this fiddle Anyway, my app initiates fine and the home controller is included. Also I get 200 status codes on the inclusion of my directive, and my code throws no errors. Here is my html:

  <form id="addFields">
<div class="row">
  <div class="col-xs-4">
  </div>
  <div class="col-xs-4 text-center">
    <div addInputFieldsButton></div>
    <input id="fieldName" placeholder="Enter field name:"></input>
    <button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>
  </div>
  <div class="col-xs-4">
  </div>
</div>
</form>
<div id="reviewFields">
</div>

Notice I am attempting both to add the button that is supposed to add input fields, and just bind the directive that adds input fields to an existing button as an attribute. Neither work.

addInputFields directive:

(function () {
  angular.module('reviewModule')
    .directive('addInputFields', addInputFields);

  addInputFields.$inject = ['$log'];
  function addInputFields ($log) {
    return function (scope, element, attr) {
      $log.debug('binding click event to add review button now.');
      element.bind('click', function ($compile) {
        $log.debug('button bound.');
        angular.element(document.getElementById('reviewFields')).append($compile("<button>YOU MADE A BUTTON, COOL BRO</button>")(scope));
      });
    }
  }
})()

and my directive for attempting to add a button that has the above binding:

(function () {
  angular.module('reviewModule')
    .directive('addInputFieldsButton', addInputFieldsButton);

  addInputFieldsButton.$inject = ['$log'];
  function addInputFieldsButton ($log) {
    return {
      restrict : 'E',
      template : '<input id="fieldName" placeholder="Enter field name:"></input>\
        <button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>'
    };
  };
})()

I copied the fiddle almost exactly, and really have no idea why nothing is happening while attempting to use either of these directives. Forgive me if my error is obvious, I am still pretty new to AngularJS.

Answer 1

I believe your second directive is not defined correctly on UI, it should be - separated with smaller case add-input-fields instead of addInputFields .

Code

(function () {
  angular.module('reviewModule')
    .directive('addInputFieldsButton', addInputFieldsButton);

  addInputFieldsButton.$inject = ['$log'];
  function addInputFieldsButton ($log) {
    return {
      restrict : 'E',
      template : '<input id="fieldName" placeholder="Enter field name:"></input>\
        <button id="addFieldBtn" add-input-fields><span class="glyphicon glyphicon-plus"></span></button>'
                                //^^^^^^^^^^^^^^^here is change
    };
  };
})()