I am facing an issue with my project that combines AngularJS and Materialize CSS. I am trying to open a modal with id #modal-some-form using AngularJS
$('#model-some-form').openModel();Interestingly, I have another project with similar code, using the same versions of JQuery, AngularJS, and Materialize. However, when attempting to open the modal, I encounter the following error:
Error: $(...).openModel is not a function
The code snippet for the modal is as follows:
<div ng-app="myApp" ng-controller="myController">
<div id="modal-bango-form" class="modal">
<div class="modal-content">
<h4 id="modal-bango-title">Andika bango jipya</h4>
<div class="row">
<label>Ujumbe wa bango unahusu nini?</label>
<div class="input-field">
<select class="browser-default">
<option value="" disabled selected>Chagua</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<i class="material-icons prefix">mode_edit</i>
<textarea id="ujumbe" class="materialize-textarea"></textarea>
<label for="ujumbe">Ujumbe wa bango</label>
</div>
<div class="input-field">
<a class="btn waves-effect waves-light blue-grey" ng-click="createBango()"><i class="material-icons left">add</i> Tuma</a>
<a class="btn waves-effect waves-light blue-grey" ng-click="closeBangoForm()"><i class="material-icons left">close</i> Ghairi</a>
</div>
</div>
</div>
</div><!-- // end of #modal-form -->
</div>
In addition, the Angular script for this project is shown below:
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope, $http){
$scope.openBangoForm = function(){
$("#modal-bango-form").openModel();
}
$scope.closeBangoForm = function(){
$('#modal-bango-form').closeModel();
}
});
The functions closeModel() and openModel() are not working here, even though they work fine in the other project.
Any assistance would be greatly appreciated.
Thank you