Semantic UI Modal Undefined

Question

I'm having trouble getting semantic-ui's modal module to work in my angularJS controller. When I call

$(".ui.modal").modal()

I'm getting the following error.

TypeError: undefined is not a function at l.$scope.showAddBeacon (*js/controllers.js:320:20) at hb.functionCall (*lib/angular/angular.min.js:198:426) at Cc.(anonymous function).compile.d.on.f (*lib/angular/angular.min.js:215:74) at l.$get.l.$eval (*lib/angular/angular.min.js:126:193) at l.$get.l.$apply (*lib/angular/angular.min.js:126:419) at HTMLDivElement. (*lib/angular/angular.min.js:215:126) at HTMLDivElement.n.event.dispatch (*lib/jquery/dist/jquery.min.js:3:6444) at HTMLDivElement.n.event.add.r.handle (*lib/jquery/dist/jquery.min.js:3:3219)

The semantic module is installed and the modal is hidden by default as I would expect. If I call the following it works fine:

$(".ui.modal").show()

Answer 1

I am able to achieve this requirement with $(".ui.modal").modal('show') instead of $(".ui.modal").modal(). Semantic UI modal function expects at least one argument in it to determine the status of the modal (show, hide, setting configuration, etc.).

Modal function with no argument is used to initialize a modal. On initialization, a modal's current size will be cached, and the element will be detached from the DOM and moved inside a dimmer.

Reference: http://semantic-ui.com/modules/modal.html#/usage