Question

我有这个代码，我试图在页面的每个输入元素上添加一个按钮 - 如果我检查dom，按钮就在那里，但它永远不会被渲染。

  <html>
        <div ng-app="app">
              <label for="input1">input1</label>
              <input name="input1" type="text">
              <br><br><br>
              <label for="input2">input2</label>
              <input name="input2" type="text">
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

        <script>


          angular.module('app', [])
          .directive('input', function($compile) {
            return {
              restrict: 'CAE',
              link: Link
            };

            function Link(scope, element, attrs) {

                var elementAppend = '<button>X</button>';
                var a_input = angular.element($compile(elementAppend)(scope));
                element.append(a_input);

            }
          });


          </script>
          </html>

Answer 1

.append尝试在输入元素中添加元素，这是不受支持的。 input元素不能包含子元素。此限制来自HTML，而不是来自AngularJS。

使用element.after(a_input);代替在输入元素后添加按钮。

angular.module('app', [])
  .directive('input', function($compile) {
  return {
    restrict: 'CAE',
    link: Link
  };

  function Link(scope, element, attrs) {
    var elementAppend = '<button>X</button>';
    var a_input = angular.element($compile(elementAppend)(scope));
    element.after(a_input);

  }
});

angular.bootstrap(document.getElementById('app'), ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<html>
<body>
  
  <div id="app">
    <label for="input1">input1</label>
    <input name="input1" type="text">
    <br><br><br>
    <label for="input2">input2</label>
    <input name="input2" type="text">
  </div>

</body>
</html>

Angular 1.x - 附加在指令上的元素不呈现

1 个答案: