Angular和Bootstrap UI Modal指令創建重複鏈接

Question

我創建了一個基於小教程的模態指令。我創造了一個基本的努力，我的問題在下面。

<a modal="" name="signin" ng-click="" modal-template="signin" modal-size="sm" 
    modal-color-override="white" class="btn btn-default btn-block ng-isolate-scope"> 
    <a ng-click="open()" style="color: white;" ng-transclude="" class="ng-binding"> 
     <span class="ng-scope">Login</span> 
    </a> 
</a> 

http://plnkr.co/edit/XIRoQy?p=preview

該指令創建一個二次這導致恆定樣式問題自舉的CSS因爲然後導航欄A HREF> LI>一個變爲導航欄> LI> A>一個。

還有一些按鈕問題，其中鏈接位於按鈕內部，因此點擊區域急劇減少。

您是否有推薦的方法來創建一個只添加modalInstance.open（）到父元素而不是在父級內創建新鏈接的屬性/元素？

正是這樣很明顯，我認識到，該指令旨在增加與模板和transclude父裏面的鏈接，但我找不到辦法解決它......

Answer 1

我認爲你需要將replace: true添加到您的指令配置（plnkr）。我還爲您的元素添加了href=""，因此將使用正常的鏈接光標，並將;放在open()調用之前，因此您的index.html中的ng-click代碼也會執行。

app.directive('modal', function($modal){ 
    return { 
    transclude: true, 
    replace: true, 
    restrict: 'EA', 
    template: '<a ng-click=";open()" ng-transclude>{{name}}</a>', 
    scope: { 

HTML：

<a href="" modal name="login" ng-click="navCollapsed = true" 
    modal-template="signin" modal-size="sm" >Login</a>