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

Question

我正在尝试构建一个指令，将表单组添加到特定的 div 中。我尝试通过将指令绑定(bind)到 html 中的按钮来实现此目的。我的应用程序非常简单，因为这就是我目前正在尝试做的事情。类似于 this fiddle不管怎样，我的应用程序启动正常，并且包含家庭 Controller 。此外，我在包含指令时收到 200 个状态代码，并且我的代码没有抛出任何错误。这是我的 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>

请注意，我正在尝试添加应该添加输入字段的按钮，并仅将添加输入字段的指令作为属性绑定(bind)到现有按钮。都不起作用。

addInputFields 指令:

(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));
      });
    }
  }
})()

以及我尝试添加具有上述绑定(bind)的按钮的指令:

(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>'
    };
  };
})()

我几乎完全复制了 fiddle ，并且真的不知道为什么在尝试使用这些指令时没有任何反应。如果我的错误很明显，请原谅我，我对 AngularJS 还很陌生。

Answer 1

我相信你的第二个指令在 UI 上没有正确定义，它应该是 -用较小的箱子分开add-input-fields而不是addInputFields .

代码

(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
    };
  };
})()