Question

我想创建一个confirmation-dialog-header指令，打开一个Bootstrap UI Modal，将会像这样使用：

<button class="btn" confirmation-dialog-header="Non Working Dialog">
  Non Working Dialog
</button>

以下是我尝试做的事情（CoffeeScript）：Live Demo

app.directive 'confirmationDialogHeader', ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    $confirmationDialog = $ """
      <div modal="confirmationDialog">
        <div class="modal-header">
          <h4>#{attrs.confirmationDialogHeader}</h4>
        </div>
        <div class="modal-body">
          I want to be hidden by default
        </div>
        <div class="modal-footer">
          <button class="btn" ng-click="confirmationDialog = false">
            OK
          </button>
        </div>
      </div>
    """

    $(document.body).append($confirmationDialog) 

    $(element).click ->  
      scope.confirmationDialog = yes

不幸的是，默认情况下不会隐藏模态，单击按钮似乎没有任何效果。

任何帮助都将不胜感激。

Answer 1

当动态插入包含AngularJS指令的DOM元素时，需要$compile它们才能启动AngularJS。
在事件回调中，需要调用scope.$apply来触发AngularJS评估循环。

因此

app.directive 'confirmationDialogHeader', ($compile) -> # 1

   $(document.body).append($confirmationDialog) 
   $compile($confirmationDialog)(scope) # 1

   $(element).click ->  
     scope.confirmationDialog = yes
     scope.$apply() # 2

Working One

Answer 2

您应该使用dialog服务。要隐藏指令中的模态，请使用类<div>将整个对话框包装在hide,modal,fade中。

Angular UI Bootstrap Modal在指令中使用

2 个答案: