0

次のように使用されるBootstrap UI Modalconfirmation-dialog-headerを開くディレクティブを作成したいと思います。

<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

残念ながら、モーダルはデフォルトでは非表示になっておらず、ボタンをクリックしても何の効果もないようです。

どんな助けでも大歓迎です。

4

2 に答える 2

2
  1. $compileAngularJS ディレクティブを含む DOM 要素を動的に挿入する場合、AngularJS をキックする必要があります。
  2. イベント コールバックでは、scope.$applyAngularJS 評価ループをトリガーするために呼び出す必要があります。

したがって

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>をクラスでラップしますhide,modal,fade。

于 2013-06-09T13:55:32.237 に答える