UI Bootstrap のウインドウを Draggable にする

これでできた。

angular.js を読み込む前に jQuery, jQuery UI の .js を読み込む必要があります。

  angular.module('app')
    .directive('uibModalWindow', function () {
      return {
        restrict: 'A',
        link: function (scope, element) {
          $(element).draggable()
        }
      }
    })

情報源は以下の Stack Overflow のエントリ。 ただ注意点として、UI Bootstrap の全ディレクティブに uib- が付くようになったので、コメントの modalWindow も uibModalWindow と読み替える必要がある。

angularjs - AngularUI modal to be draggable and resizable - Stack Overflow

こういう記事もあったけど、directive 以外で element をいじるのは Angular 的にダメなんじゃないだろうか。

angular.js/ui-bootstrapでui-bootstrapのモーダルウィンドウをドラッガブルにするには - わからん

あとこういう記事もあった。

Twitter Bootstrap のモーダルをドラッグで動かしたいときは - AngularJS Ninja Blog

このままだとセレクタ.modal.fadeと.modal.fade.inに定義されているtopとtransitionのプロパティ（モーダルが上から滑り降りてくるトランジション）による影響で、縦方向のドラッグがの〜んびりした動きになって違和感が残る。 なので、上から滑り降りてくるトランジションはあきらめて、class 属性からfadeを消してしまうのがいいと思う。

この現象は確認できなかった。 自分の確認不足の可能性もあるので困った時のためにメモ。

ところで：$uibModal の resolve プロパティ

$uibModal のドキュメント見てたらふと resolve ってプロパティを見つけた。 これにキーと任意のオブジェクトを渡せば、そのキー名でモーダルウィンドウ側のコントローラーで inject できるようになるらしい。 こんな感じ (コードはここからの引用)。

$uibModal.open({
    controller : 'DialogController',
    resolve: {
        params: function() {
            return {
              title:'DialogSample',
              message:'Take it easy!'
            };
        }
    }});

angular.module('DialogSample').controller('DialogController', ['$uibModalInstance', 'params',
      function($uibModalInstance, params){
        console.log(params.title); // => 'DialogSample'
        console.log(params.message); // => 'Take it easy!'
      }]);

わざわざ受け渡しをするだけのサービスを作る必要はなかった…すごく無駄な再発明をしててすごくショックを受けたので羞恥周知してみる。