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

Question

I have this code where I'm trying to append a button to every input element on the page - if I inspect the dom, the button is there, but it is never rendered. 我有这段代码，试图在页面上的每个输入元素上附加一个按钮-如果我检查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 tries to add the element inside the input element, which isn't supported. .append试图将元件添加的输入元件，其不支持内部。 An input element can't have child elements. input元素不能有子元素。 This restriction comes from HTML, not from AngularJS. 此限制来自HTML，而不是来自AngularJS。

Use element.after(a_input); 使用element.after(a_input); instead to add the button after the input element. 而是在输入元素之后添加按钮。

 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 个解决方案

解决方案1
2 2018-02-09 12:20:42

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

问题描述

1 个解决方案

解决方案1 2 2018-02-09 12:20:42

解决方案1
2 2018-02-09 12:20:42