角度模态在点击时不打开

时间:2014-10-20 22:43:28

标签: javascript angularjs modal-dialog

我有一个按钮,我想打开一个包含联系表单的模型。点击它没有任何反应。我从另一个html页面和控制器复制了这段代码,所以不确定为什么它不起作用。有任何想法吗???这是我的代码。谢谢。

页面html

<div class="tourContact"><button class="tourContactBtn" ng-click="openDialog()">Contact Us</button></div>
<div ag-modal
     title="Contact aboutGolf"
     open="{{dialogOpen}}"
     ok-button="SEND"
     ok-callback="handleOk"
     cancel-button="Cancel"
     cancel-callback="handleCancel"
     width="50%"
     height="auto">

</div>

控制器附加到页面

$scope.openModal = function() {
            $scope.dialogOpen = true;
        };

modal js

define(['./module'], function (directives) {
    'use strict';

    directives.directive('agModal', function($timeout) {
        return {
            restrict: 'A',
            scope: {
                okButton: '@',
                okCallback: '=',
                cancelButton: '@',
                cancelCallback: '=',
                open: '@',
                title: '@',
                width: '@',
                height: '@',
                show: '@',
                hide: '@',
                autoOpen: '@',
                resizable: '@',
                closeOnEscape: '@',
                hideCloseButton: '@'
            },
            replace:false,
            templateUrl: 'assets/templates/contactus.html',      // the transcluded content
            //is placed in the div
            link: function (scope, element, attrs) {
                // Close button is hidden by default
                var hideCloseButton = attrs.hideCloseButton || true;

                // Specify the options for the dialog
                var dialogOptions = {
                    autoOpen: attrs.autoOpen || false,
                    title: attrs.title,
                    width: attrs.width || 350,
                    height: attrs.height || 200,
                    modal: attrs.modal || false,
                    show: {
                        effect: 'slide'
                    },
                    hide: attrs.hide || '',
                    draggable: attrs.draggable || true,
                    resizable: attrs.resizable,
                    closeOnEscape: attrs.closeOnEscape || false,

                    close: function() {

                    },
                    open: function(event, ui) {
                        // Hide close button
                        if(hideCloseButton === true) {
                            $(".ui-dialog-titlebar-close", ui.dialog).hide();
                        }
                    }
                };

            }
        };
    });
});

1 个答案:

答案 0 :(得分:0)

您的ng-click属性引用openDialog,但您的范围包含一个名为openModal的函数。

请尝试ng-click="openModal()"