每次按钮被点击

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