8

TwitterBootstrapModal用のディレクティブangularJSディレクティブを作成しようとしています。

    var demoApp = angular.module('demoApp', []);

demoApp.controller('DialogDemoCtrl', function AutocompleteDemoCtrl($scope) {
    $scope.Langs = [
        {Id:"1", Name:"ActionScript"},
        {Id:"2", Name:"AppleScript"},
        {Id:"3", Name:"Asp"},
        {Id:"4", Name:"BASIC"},
        {Id:"5", Name:"C"},
        {Id:"6", Name:"C++"}
    ];

    $scope.confirm = function (id) {
        console.log(id);
        var item = $scope.Langs.filter(function (item) { return item.Id == id })[0];
        var index = $scope.Langs.indexOf(item);
        $scope.Langs.splice(index, 1);
    };
});

demoApp.directive('modal', function ($compile, $timeout) {
    var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none'  tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>");
    var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>"

    var linker = function (scope, element, attrs) {
        scope.confirmButtonText = attrs.confirmButtonText;
        scope.cancelButtonText = attrs.cancelButtonText;
        scope.modalHeaderText = attrs.modalHeaderText;
        scope.modalBodyText = attrs.modalBodyText;
        scope.confirmButtonClass = attrs.confirmButtonClass;
        scope.cancelButtonClass = attrs.cancelButtonClass;
        scope.modalId = attrs.modalId;
        scope.linkTitle = attrs.linkTitle;

        $compile(element.contents())(scope);
        var newTemplate = $compile(modalTemplate)(scope);

        $(newTemplate).appendTo('body');

        $("#" + scope.modalId).modal({
            backdrop: false,
            show: false
        });
    }

    var controller = function ($scope) {
        $scope.handler = function () {
            $timeout(function () {
                $("#"+ $scope.modalId).modal('hide');        
                $scope.confirm();            
            });
        }
    }

    return {
        restrict: "E",
        rep1ace: true,
        link: linker,
        controller: controller,
        template: linkTemplate
        scope: {
            confirm: '&'
        }
    };
});​

これがJsFiddleの例ですhttp://jsfiddle.net/okolobaxa/unyh4/15/

ただし、handler（）関数は、ページ上のディレクティブと同じ回数実行されます。なんで？正しい方法は何ですか？

4

4 に答える 4

8

Twitterブートストラップのドキュメントが言うように、Twitterブートストラップモーダルを使用するだけで、それらを機能させるのに十分であることがわかりました。

管理ページにユーザー編集フォームを配置するためにモーダルを使用しています。起動に使用するボタンには、ユーザー ID をそのスコープの関数に渡す ng-click 属性があり、それがサービスに渡されます。モーダルのコンテンツは、サービスからの変更をリッスンし、値を更新してフォームに表示する独自のコントローラーに関連付けられています。

だから.. ng-click 属性は実際にはデータを渡しているだけで、モーダルはまだ data-toggle と href タグでトリガーされています。モーダル自体の内容に関しては、それは部分的です。そのため、マークアップにあるモーダルの単一のインスタンスをすべてトリガーするページに複数のボタンがあり、クリックされたボタンに応じて、そのモーダルのフォームの値が異なります。

コードを見て、plnkr デモを構築するためにコードを引き出すことができるかどうかを確認します。

編集: 私は自分のアプリで何を使用しているかを本質的に説明する簡単なプランカー デモをまとめました: http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview

おまけに、2 つのパスワード フィールドが一致する (またはエラーとして強調表示される) ことを確認するためのいくつかのテストがあり、パスワードが一致しない場合、または新しいユーザーのユーザー名とパスワード フィールドが空である場合は送信ボタンを無効にします。もちろん、これは単なるデモなので、save は何もしません。

楽しみ。

于 2013-01-15T15:58:10.040 に答える
6

まあ、これを再発明したいのでなければ、そうでなければ私はすでに解決策があると思います。

AngularUIからこれをチェックしてください。Twitterブートストラップなしで実行されます。

于 2012-11-16T15:38:41.320 に答える
4

遅いかもしれませんが、ハンドラーが演習として数回呼び出された理由を理解しようとし始め、完了するまで停止できませんでした:P

その理由は、すべてが機能し始めたことを修正すると、各モーダル用に作成した各 div に一意の ID がなかったためです。これの正確な理由については聞かないでください。おそらく $('#' + scope.modalId).modal() 呼び出しと関係があります。

他の誰かがこれを理解しようとしている場合は、私の発見を投稿する必要がありますが:)

于 2013-09-14T07:05:01.953 に答える