Javascript中的函数预期问题

Function Expected issue in Javascript

本文关键字：问题函数 Javascript 更新时间：2023-09-26

我使用JQuery UI弹出。在点击OK按钮时，我调用了一个Angular函数

示例代码如下:

$('#dialog-sample').dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "blind",
        duration: 1000
    },
    resizable: false,
    width: 500,
    buttons: {
        Save: {
            id: 'btnSampleSubmit',
            text: 'Submit',
            click: function() {
                var myScope = angular.element($('#myID')).scope();
                myScope.myFunction();
            }
        },
        Cancel: {
            id: 'btnSaveWorkSpaceCancel',
            text: 'Cancel',
            click: function() {
                $(this).dialog("close");
            }
        }
    }
});

我还在控制器内部创建了函数"myFunction"，该函数与id为"myID"的元素相关。

获取错误:

控制台上的"function expected"

在这里，我做了一个工作演示:
http://jsfiddle.net/

HTML

<html>
<head>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body {
    background-color: #eef;
}

#dialog {
    display: none;
}
.myTarget {
    font-weight: bold;
    font-style: italic;
    color: red;
}
</style>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <div>
            <button open-dialog="dialog">Open Dialog</button>
        </div>
    </div>
    <div id="dialog" title="Empty the recycle bin?">
        <p>
            <span class="ui-icon ui-icon-alert"
                style="float: left; margin: 12px 12px 20px 0;"></span>These items
            will be permanently deleted and cannot be recovered. Are you sure?
        </p>
    </div>
</body>
</html>

Angular JS Code

var app=angular.module('myApp', [])
    .controller('myCtrl', function ($scope) {

    $scope.myFunction = function () {
        alert('inside myFunction ');
    };

    })
    .directive('openDialog', function(){
        return {
            restrict: 'A',
            link: function(scope, elem, attr, ctrl) {
                var dialogId = '#' + attr.openDialog;
                elem.bind('click', function(e) {
                    $( dialogId ).dialog({
                        autoOpen: true,
                        show: {
                            effect: "blind",
                            duration: 1000
                        },
                        hide: {
                            effect: "blind",
                            duration: 1000
                        },
                        resizable: false,
                        width: 500,
                        buttons: {
                            Save: {
                                id: 'btnSampleSubmit',
                                text: 'Submit',
                                click: function() {
                                    //var myScope = angular.element($('#myID')).scope();
                                     $(this).dialog("close");
                                    scope.myFunction();
                                }
                            },
                            Cancel: {
                                id: 'btnSaveWorkSpaceCancel',
                                text: 'Cancel',
                                click: function() {
                                    $(this).dialog("close");
                                }
                            }
                        }
                        });
                });
            }
        };
    });

修改

$('#myID')

'#myID'

HTML

<div ng-controller="myCtrl">

假设你的控制器是myCtrl

var myScope = angular.element('[ng-controller="myCtrl"]').scope();
myScope.myFunction();