Question

我正在尝试构建一个将表单组添加到特定div的指令。我通过将指令绑定到我的html中的按钮来尝试这样做。我的申请非常简单，因为这是我现在所做的一切。与this fiddle类似，无论如何，我的应用程序启动正常，并包含家庭控制器。我在包含我的指令时得到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>

注意我正在尝试添加应该添加输入字段的按钮，并且只是绑定将输入字段作为属性添加到现有按钮的指令。都没有工作。

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

和我试图添加具有上述绑定的按钮的指令：

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

我几乎完全复制了小提琴，并且在尝试使用这些指令中的任何一个时都不知道为什么没有发生任何事情。请原谅我，如果我的错误很明显，我仍然是AngularJS的新手。

Answer 1

我认为你的第二个指令在用户界面上没有正确定义，应该-用较小的案例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
    };
  };
})()

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

1 个答案: