вставив директиву каждый раз, когда нажата кнопка

Question

Я работаю с урока здесь: https://fourtonfish.com/blog/2014-01-dynamically-add-directives-in-angularjs-no-jquery/

Однако, я хочу создать директиву и ввести это в моем HTML каждый раз, когда кнопка нажата. После некоторого чтения, моя попытка ниже. Вы увидите, что в main.js у меня есть этот код:

.directive('addfields',function($compile){ 
    console.log("directive called."); 

    return function(scope,element){ 
    element.on("click",function(){ 
     var enviroElement = angular.element(document.createElement('enviroVariables')); 
     var el = $compile(enviroElement)(scope); 
     console.log(el); 
     angular.element(document.getElementById('moreEnviromentVariables')).append($compile(el)(scope)) 
    }) 
    } 
}) 

Здесь я пытаюсь создать элемент, скомпилировать его, а затем впрыснуть его. Это не работает, и я не знаю, почему. Я не получаю ошибок. Какие-либо предложения?

Полный код:

main.html

<div id ="fullForm" ng-controller="MainCtrl" >     
     <enviro-variables></enviro-variables> 
<div id="moreEnviromentVariables"></div> 
    </div> 
        <button-add></button-add> 

main.js

'use strict'; 

    /** 
    * @ngdoc function 
    * @name jsongeneratorApp.controller:MainCtrl 
    * @description 
    * # MainCtrl 
    * Controller of the jsongeneratorApp 
    */ 
    angular.module('jsongeneratorApp') 
     .controller('MainCtrl', function ($scope) { 

     .directive('buttonAdd',function(){ 
     return{ 
     restrict:'E', 
     templateUrl:'scripts/directives/addbutton.html' 
     } 
    }) 

    .directive('addfields',function($compile){ 
    console.log("directive called."); 

    return function(scope,element){ 
    element.on("click",function(){ 
     var enviroElement = angular.element(document.createElement('enviroVariables')); 
     var el = $compile(enviroElement)(scope); 
     console.log(el); 
     angular.element(document.getElementById('moreEnviromentVariables')).append($compile(el)(scope)) 
    }) 
    } 
}) 

addbutton.html

<div class="row rowmargin"> 
    <div class="col-sm-9"> 
    </div> 
    <div class="col-sm-3"> 
    <button addfields class="btn"> Add New Variable</button> 

    </div> 
</div> 

enviromentVariablesDiv.html

<div id = "formSection"> 
        <div class="row rowmargin"> 
        <div class="col-sm-6"> 
         <input type="text" class="form-control" placeholder="key" id="key" ng-model="key" ng-change="updateJson()" ng-model-options="{debounce: 1000}"> 
        </div> 
        <div class="col-sm-6"> 
         <input type="text" class="form-control" placeholder="value" ng-model="value" ng-change="updateJson()" ng-model-options="{debounce: 1000}" > 
        </div> 
        </div> 

       </div> 

Answer 1

посмотреть plunker http://plnkr.co/edit/eZTtRVTPb7k9kgS8woKh?p=preview и этот Inserting directives into HTML in AngularJS?

вставить директиву в DOM вы можете использовать следующую

Пример:

Существуют различные функции, которые регистрируются в в угловое обслуживание под названием FeatureRegistry. Оттуда они берутся и вставлены в боковую панель от FeatureSelectionController. По мыши на включенной функции startFeature() функции соответствующей функции следует ссылаться

в HTML это может быть решено так:

<feature ng-repeat="f in registry.all()" model="f" state="list"> 
<feature ng-repeat="f in registry.maximized()" model="f" state="open"> 
<feature ng-repeat="f in registry.minimized()" model="f" state="minimized"> 

Затем в шаблоне директивы, вы можете используйте свою общую функциональность , затем определите, что нужно иметь в зависимости от состояния, используя ng-switch или ng-show