Angular 和 Bootstrap UI 模态指令创建重复链接

Question

我根据一个小教程创建了一个模态指令。我已经为我的努力创建了一个基本的 plunkr，我的问题如下。

<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

该指令创建了一个辅助 a href，这会导致引导 css 出现持续的样式问题，因为 navbar > li > a 会变成 navbar > li > a > a。

还有一些按钮问题，链接在按钮内部，所以点击区域大大减少。

您是否有推荐的方法来创建属性/元素，只需将 modalInstance.open() 添加到父元素而不是在父元素中创建新链接？

很清楚，我意识到该指令旨在使用模板添加父级内部的链接并进行转换，但我找不到解决方法...

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>