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

该指令创建一个辅助a href，导致bootstrap css的常量样式问题，因为然后navbar＆gt; li> a转向导航栏＆gt; li> a＆gt;一个。

还有一些按钮问题，其中链接位于按钮内部，因此点击区域会大幅减少。

您是否有建议的方法来创建一个属性/元素，只是将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>

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

1 个答案: