AngularJS指令添加其他指令不起作用

Question

我想構建一個指令，將表單組添加到特定的div。我試圖通過綁定指令到我的HTML中的按鈕。我的應用程序非常簡單，因爲這是我現在要做的所有事情。類似this fiddle無論如何，我的應用程序啓動罰款，包括家庭控制器。此外，我收到200個狀態代碼，包含我的指令，並且我的代碼不會引發錯誤。這裏是我的html：

<form id="addFields"> 
<div class="row"> 
    <div class="col-xs-4"> 
    </div> 
    <div class="col-xs-4 text-center"> 
    <div addInputFieldsButton></div> 
    <input id="fieldName" placeholder="Enter field name:"></input> 
    <button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button> 
    </div> 
    <div class="col-xs-4"> 
    </div> 
</div> 
</form> 
<div id="reviewFields"> 
</div> 

通知我試圖既要補充一點，應該增加輸入字段，只是綁定，增加了輸入字段到現有的按鈕作爲一個屬性的指令按鈕。既沒有工作。

addInputFields指令：

(function() { 
    angular.module('reviewModule') 
    .directive('addInputFields', addInputFields); 

    addInputFields.$inject = ['$log']; 
    function addInputFields ($log) { 
    return function (scope, element, attr) { 
     $log.debug('binding click event to add review button now.'); 
     element.bind('click', function ($compile) { 
     $log.debug('button bound.'); 
     angular.element(document.getElementById('reviewFields')).append($compile("<button>YOU MADE A BUTTON, COOL BRO</button>")(scope)); 
     }); 
    } 
    } 
})() 

和我的企圖添加上面綁定有一個按鈕指令：

(function() { 
    angular.module('reviewModule') 
    .directive('addInputFieldsButton', addInputFieldsButton); 

    addInputFieldsButton.$inject = ['$log']; 
    function addInputFieldsButton ($log) { 
    return { 
     restrict : 'E', 
     template : '<input id="fieldName" placeholder="Enter field name:"></input>\ 
     <button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>' 
    }; 
    }; 
})() 

我複製了小提琴幾乎一模一樣，真的不知道爲什麼什麼正在嘗試使用這些指令中的任何一個。請原諒我，如果我的錯誤是顯而易見的，我對AngularJS仍然很陌生。

Answer 1

我相信你的第二個指令在UI上沒有被正確定義，應該是-用較小的情況分開，而不是addInputFields。

代碼

(function() { 
    angular.module('reviewModule') 
    .directive('addInputFieldsButton', addInputFieldsButton); 

    addInputFieldsButton.$inject = ['$log']; 
    function addInputFieldsButton ($log) { 
    return { 
     restrict : 'E', 
     template : '<input id="fieldName" placeholder="Enter field name:"></input>\ 
     <button id="addFieldBtn" add-input-fields><span class="glyphicon glyphicon-plus"></span></button>' 
           //^^^^^^^^^^^^^^^here is change 
    }; 
    }; 
})()