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>