0

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

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

这是我正在尝试做的事情（CoffeeScript）：现场演示

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

不幸的是，modal默认没有隐藏，点击按钮似乎没有任何效果。

任何帮助，将不胜感激。

4

2 回答 2

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

因此

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

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

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

工作一

于 2013-06-10T05:48:46.253 回答
0

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

于 2013-06-09T13:55:32.237 回答