每次按鈕被點擊

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