javascript - 指令 : append templateUrl as a sibling element

Question

我想在输入文本字段上使用属性指令将模板文件的内容作为同级元素附加。

我试过了，但是模板的内容被包裹在 <input></input> 中标签，这不是期望的行为。我需要将模板文件的内容作为输入文本的同级。无论如何，angular 代码在模板文件上执行时没有错误。

我尝试使用 Transclude 但没有成功。

HTML

主页

<input type="text" ng-model="myModel" name="inputName" ng-my-directive>

模板.html

<div>
  <div ng-repeat="row in rows">
    <button ng-repeat="button in row">{{button}}</button>
  </div>
</div>

JS

.directive('ngMyDirective', function ($compile) {
  return {
    require: '?ngModel',
    restrict: 'A',
    transclude:true,
    templateUrl: 'template.html',
    controller: ['$scope', function ($scope) {
       ...
    },
    link: function (scope, element, attrs, ngModelCtrl, transclude) {
       ...
         element.append(transclude());

    }

目前，我有这个(错误的)结果:

<input type="text">
  <div>
   ...
  </div>
</input>

我需要这个结果:

<input type="text">
<div>...</div>
<div>...</div>
...

预先感谢您的努力!

Answer 1

您可以尝试对模板内容使用 element.after():

angular.module('myApp', [])

  .directive ('ngMyDirective', function() {
  
    return {
      
      restrict: 'A',
      link: function(scope, element) {
        
        element.after('<h3>sibling content</h3>');
      }
    }    
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
    <input type="text" ng-model="myModel" name="inputName" ng-my-directive>
</div>

这种方法的问题是附加一个“template.html”文件。在这种情况下，您可以在 ajax 请求中获取 HTML 内容。示例:

app.directive('ngMyDirective', function($http, $compile) {

  return {

    restrict: 'A',
    link: function(scope, element){

      $http.get('template.html')
        .then(function(response){
          element.after($compile(response.data)(scope));
        });
  }
});