Question

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

我试过这个，但模板的内容被包含在<input></input>标签内，这不是理想的行为。我需要将模板文件的内容作为输入文本的兄弟。无论如何，角度代码在模板文件上执行时没有错误。

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

HTML

主页

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

template.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));
        });
  }
});

指令：将templateUrl作为兄弟元素附加

1 个答案: