Как добавить директиву в Angular

Question

У меня проблема, когда вложенность прилагаемых директив работает некорректно. запрос-строка представляет собой директиву (с шаблоном 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, а затем добавляю его к предыдущей строке запроса ... но здесь моя логика ошибочна, потому что она не добавляется, а скорее вложенные в первую строку запроса.

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) 

Редактировать - изменено на место queryRow элемент внутри элемента формы за комментарий @ 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

Я добавил новый <div> с классом query-row-wrapper внутри queryBuilderTemplate.html, поэтому каждый новый скомпилированный query-row прилагается к этой оболочке.

В результате HTML выглядит так, как ожидалось.

Answer 4

Shoot для не- .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}}