如何在Angular中追加指令

Question

我有一個問題，即附加指令的嵌套無法正常工作。 query-row是一個指令（帶有HTML模板），我想要具有以下DOM結構

期望的結果

<query-row></query-row>
<query-row></query-row>
<query-row></query-row>
etc...

但是我得到的是這個。 另請參閱截圖

<query-row>
   <query-row></query-row>
   <query-row></query-row>
   etc...
</query-row>

Javascript代碼。 如您所見，在控制器中，我創建了一個稱為query-row的元素，然后將其附加到先前的query-row ...但是這是我的邏輯有問題的地方，因為它沒有附加，而是嵌套在第一個查詢行中。

angular.module('app', ['ngAnimate', 'ui.bootstrap'])
  .controller('queryBuilderCtrl', ['$scope', '$compile', function($scope, $compile) {

    $scope.add = function() {
      var queryRow = angular.element(document.createElement('query-row'))
      $compile(queryRow)($scope)
      angular.element('query-row').append(queryRow)
    }
  }])
  .directive('queryBuilder', function() {
    return {
      restrict: 'E',
      templateUrl: 'queryBuilderTemplate.html',
      link: function(scope, elem, attrs) {

      }
    }
  }).directive('queryRow', function() {
    return {
      restrict: 'EA',
      templateUrl: 'queryRowTemplate.html',
      link: function(scope, elem, attrs) {

      }
    }
  });

這是一個plnkr http://plnkr.co/edit/1WAgBCEbyk7Tz3fLKnnW

Answer 1

回答問題

看來問題出在這里：

 angular.element('query-row').append(queryRow)

您可能的意思是：

angular.element('query-row').last().after(queryRow)

編輯 -修改為將@RichardRow元素放置在每個@PierreDuc的注釋的表單元素內。 這將找到最后一個<query-row>元素，然后在其后追加新創建的queryRow元素。

更好的解決方案

但說實話，這絕不是我建議這樣做的方式。 您正在使用視圖控制器（ queryBuilderCtrl ）處理DOM操作。 僅在極端情況下，您應該這樣做。 您可能應該在queryBuilderCtrl設置一個數組模型對象，並且其模板利用ng-repeat來處理DOM的創建/銷毀。

Plunker - http://plnkr.co/edit/k4PUNfeRdeGsxEdruEZi?p=preview

Answer 2

使用angular.element('query-row').last().after(queryRow)

之所以有效，是因為它將首先選擇所有query-row元素。 使用函數last() ，您將獲得最后一個（顯然）。 使用after(queryRow) ，將queryRow放置在最后一個query-row元素之后

如@jusopi所述，但是，在控制器中，應將DOM操作減少到最少

Answer 3

這是固定的示例： http : //plnkr.co/edit/DPy8YoaGh1mAAJpFrWE7

我在queryBuilderTemplate.html添加了帶有類query-row-wrapper新<div> ，因此每個新的已編譯query-row將附加到此包裝器中。

結果HTML符合預期。

Answer 4

拍攝非.append解決方案

http://plnkr.co/edit/i4S3K4JjcTPXkTLT9eOq?p=preview

var app = angular.module("myApp", []);

app.controller('myCtrl', ['$scope', function($scope){

  $scope.rows = [{data: 'something'}];
  $scope.add = function() {
    $scope.rows.push({data: 'data1'}); // whatever data goes into a row
  }


}]); 

app.directive('queryBuilder', function() {
  return {
    restrict: 'E',
    scope: {
      rows: "="
    },
    templateUrl: 'queryBuilderTemplate.html',
    link: function(scope, elem, attrs) {
      // do something here?
      console.log( scope.rows );
    }
  }
}).directive('queryRow', function() {
  return {
    restrict: 'EA',
    scope: {
      data: "="
    },
    templateUrl: 'queryRowTemplate.html',
    link: function(scope, elem, attrs) {
        // process data in some way?
        console.log( scope.data )
    }
  }
});

queryBuilderTemplate.html

<div class="queryBuilder">
    <query-row ng-repeat='row in rows' data='row.data'></query-row>
</div>

queryRowTemplate.html

Test {{data}}