Function Expected issue in Javascript

Question

I am using JQuery UI popup. On click of "OK" button, I am calling an Angular function,

Sample code below.

$('#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");
            }
        }
    }
});

Also I have created the function "myFunction" inside the controller which is related to the element which has id "myID".

Error getting :

"function expected" in the console

I am using IE.

This is not solution but angular.element('#myID').scope(); should be fine. On which line you get error ? can you post the full error ? — murli2308
– murli2308, Commented Oct 24, 2016 at 6:32

Hiro · Accepted Answer · 2016-10-24 07:57:21Z

Here, I make working demo for that:
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");
                                }
                            }
                        }
                        });
                });

            }
        };
    });

Here,I used angularjs directive which is best practice when you want to use jquery in that . Plz check that and let me know if you have any issue in that. Thanks.

Beginner · Accepted Answer · 2016-10-24 06:45:23Z

0

change your

$('#myID')

to

'#myID'

HTML

<div ng-controller="myCtrl">

assuming that your controller is myCtrl

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

answered Oct 24, 2016 at 6:45

Beginner

4,1183 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Function Expected issue in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related