0

ブートストラップ モーダル ダイアログを作成および管理するディレクティブがあります。

現在、コントローラーで保持されているブール値を監視するディレクティブがあります。コントローラーはこれを true に設定して、モーダル ダイアログを表示できます。

これはちょっと厄介なようです。より良い方法はありますか？

実際のディレクティブ:

<modal trigger="shouldDisplayModal" title="{{modalTitle}}" 
message="{{modalMessage}}" positiveclick="okClicked()" 
negativeclick="closed()" 
positivelabel="Ok" negativelabel="Cancel"/>

ディレクティブのコントローラーのウォッチ:

// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){                
    if (newValue)
    {
        // enable any disabled buttons 
        modalElem.find('button').removeClass('disabled');
        // show the dialog
        modalElem.modal('show');
    }
    else
    {
        // hide the dialog
        modalElem.modal('hide');
    }
});

これが実際の例です: http://jsfiddle.net/rabidgremlin/Ya96z/31/

更新:ページ上の複数のディレクティブに関するいくつかの問題を修正する修正例を次に示します: http://jsfiddle.net/rabidgremlin/sjbCJ/1/

4

2 に答える 2

2

ディレクティブのテンプレート内で ng-show を使用することを提案するつもりでした (これは、ディレクティブvisibleページのダイアログ コンポーネントが、属性と同様の属性と共に行うことtriggerです)、その前にいくつかのボタンを有効にする必要があることがわかりました。可視性の変更。

ですから、あなたが持っているものは問題ないと思いますし、面倒だとは思いません。ディレクティブが何かを $watch する必要があるか、イベントが発生したときにダイアログを作成することができます。これは、コメントで @pkozlowski が言及した $dialog サービスが行うことのようです。後者はトリガー属性を必要としません。

于 2013-02-02T22:57:10.740 に答える
0

ほんの数週間前に、Angular モーダルと Bootstrap モーダルの操作についてブログを書きました。

私のソリューションにはサービスが含まれます。モーダルの非表示/表示マジックはすべてブートストラップの JavaScript によって処理され、Angular はデータを心配するだけです。

http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely

于 2013-02-02T22:59:29.860 に答える