1

ui-bootstrap modal で再利用可能なディレクティブを作成しようとしています。

オプション以外はほぼ動いてる

ここにディレクティブがあります：

directive('update', function() {
return {
  restrict: "E", 
  templateUrl: "tplModal.html",
  scope: { 
    selected:"="
  },
  link: function(scope, elm, attr){
    scope.open = function (obj) {
      scope.shouldBeOpen = true;
    };

    scope.close = function () {
      scope.shouldBeOpen = false;
    };

    scope.opts = {
      backdropFade: true,
      dialogFade:true
    };
  }
}

}))

および tplModal.html

<button class='btn' ng-click='open(selected)'>Update</button>
    <div modal="shouldBeOpen" close="close()" options="opts">
        <div class="modal-header">
            <h3><i class="lead" icon="{{selected.type}}"></i> {{selected.name}}</h3>
        </div>
        <div class="modal-body">
            <!-- stuffs here -->
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
        </div>
    </div>

にもかかわらず、scope.optsフェード効果はありません。

ここにコード全体があります: http://plnkr.co/edit/Ab4BOH?p=preview

私は何を間違っていますか？

4

1 に答える 1

0

問題は、モーダル ディレクティブのリンク関数の後に呼び出されるポスト リンク関数optsのスコープにプロパティを追加することです。そのため、モーダル ディレクティブはそれらのオプションを取得しません。

解決策は、事前リンク機能に移行scope.opts = ...することです:

directive('update', function() {
    return {
        ...
        compile: function() {
            return {
                pre: function(scope, elm, attr){
                    ...
                    scope.opts = {
                        backdropFade: true,
                        dialogFade: true
                    };
                }
            };
        }
    }
}

http://plnkr.co/edit/iZaEiM?p=preview

于 2013-07-05T17:42:00.430 に答える