3

私はAngularに少し慣れていません。無効なユーザー ロールが検出されたときに Bootstap 3 モーダル ダイアログを表示しようとしています。モーダル テンプレートを表示できません。動作は機能しているようです。つまり、色あせたオーバーレイを閉じることができます..実際のモーダル テンプレートが表示されません。

ブートストラップ 3 AngularJS 1.0.7 AngularJS UI ブートストラップ 0.6.0

コントローラ

gsApp.controller('MainController', ['$rootScope', '$scope', '$q', '$window', '$location',     '$modal', 'ApplicationCache', 'UserService',
function MainController($rootScope, $scope, $q, $window, $location, $modal, ApplicationCache, UserService) {

   $scope.userRole = "BadRole";

    $scope.showBadRoleModel = function () {
        var showBadRoleModelInstance = $modal.open({
            templateUrl: "badRoleModal.html",
            backdrop: true,
            windowClass: 'modal',
            controller: badRoleModalInstance,
            resolve: {
                items: function () {
                    return $scope.userRole;
                }
            }
        });
    }

    var badRoleModalInstance = function($scope, $modalInstance, items){
        $scope.ok = function () {
            $modalInstance.close();
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    }
}]);

HTML

<div class="row" ng-controller="MainController">

            <script type="text/ng-template" id="badRoleModal.html">
                <div class="modal-header">
                    <h3>I'm a modal!</h3>
                </div>
                <div class="modal-body">
                    <h2>body</h2>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" ng-click="ok()">OK</button>
                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                </div>
            </script>

            <button class="btn" ng-click="showBadRoleModel()">Show bad role modal</button>
        </div>
4

2 に答える 2

2

AngularJs UI Bootstrap は Bootstrap 3 ではまだ動作しません。

詳細については、https ://github.com/angular-ui/bootstrap/issues/331 を参照してください。

于 2013-10-04T03:46:57.287 に答える
0

これは、Bootstrap 3 (または 2.x) モーダルを表示および非表示にする再利用可能な Angular ディレクティブです。

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

使用例 #1 - これは、モーダルを表示することを前提としています - 条件として ng-if を追加できます

<div modal-show class="modal fade"> ...bootstrap modal... </div>

使用例 #2 - これは modal-visible 属性で Angular 式を使用します

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

別の例 - コントローラーの相互作用をデモするために、このようなものをコントローラーに追加すると、2 秒後にモーダルが表示され、5 秒後に非表示になります。

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

この質問への貢献が遅れました-別の質問のためにこのディレクティブを作成しました。ここにいくつかの関連リンクがあります: Bootstrap Modalおよびhttps://stackoverflow.com/a/19668616/1009125の単純な Angular ディレクティブ

お役に立てれば。

于 2013-10-29T21:10:50.197 に答える