9

アプリのどこでも同じモーダル テンプレートを使用できるように、ui ブートストラップ モーダル ディレクティブの上にカスタム ディレクティブを作成しました。

私のディレクティブは、そのコンテンツをテンプレートに変換しようとするまで機能します。

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

index.html から

<div ng-controller="ModalDemoCtrl">
  <button class="btn" ng-click="open()">Open me!</button>
  
  <my:modal open="shouldBeOpen" close="close()">
    <h1>Content</h1>
  </my:modal>
</div>

モジュールコード:

angular.module('plunker', ['ui.bootstrap'])

.controller('ModalDemoCtrl', function($scope) {
  $scope.open = function () {
    $scope.shouldBeOpen = true;
  };

  $scope.close = function () {
    $scope.closeMsg = 'I was closed at: ' + new Date();
    $scope.shouldBeOpen = false;
  };

  $scope.items = ['item1', 'item2'];

})


.directive('myModal', function() {
  return {
    restrict : 'E',
    templateUrl: 'myTpl.html',
    //transclude: true,
    scope : {
      open : '=',
      close : '&'
    }
  };
});

モーダル テンプレート:

<div modal="open">
    <div class="modal-header">
        <h4>I'm a modal!</h4>
    </div>
    <div class="modal-body">
      <!--<div ng-transclude/>-->
    </div>
       
    
    <div class="modal-footer">
      <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
    </div>
</div>

ディレクティブとテンプレートから transclude プロパティのコメントを外すと、TypeError: undefined is not a function.

私は何が間違っているのか理解できません。

4

2 に答える 2

6

OP、あなたのスニペットはまさに私が探していたものです-ありがとう!

私はあなたのプランクreplace:trueをうまく機能させることができましたtransclude: true

更新されたプランクはこちらhttp://plnkr.co/edit/gxCS2V?p=preview

私はAngularが初めてなので、その理由を知りたいと思っていました:

replace - true に設定すると、テンプレートを要素に追加するのではなく、テンプレートが現在の要素を置き換えます。

(Angular ドキュメント経由)

もちろん、これは一度知ってしまえば理にかなっています。

指令を特にリサイクル可能にしたい場合は、知っておくとよいでしょう。モーダルは非常に完璧な例です。

関連 : ui-bootstrapはチェックする価値があります。

于 2013-03-12T03:30:41.610 に答える