I'm currently facing an issue with my app's modals when trying to call them using $modalInstance. Despite following the advice from other similar questions I found, such as avoiding the use of ng-controller, my modal still isn't functioning correctly.
Below is a snippet of my code:
Main page HTML
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
add.html Template HTML
<div ng-show="showAddModal">
<div class="product-header">
<div class="modal-title">Add Product Information</div>
<div class="modal-close" ng-click="closeModal();">X</div>
</div>
<!-- other codes go here -->
</div>
app.js AngularJS Code
var app = angular.module('ProductApp', ['ngResource', 'ui.bootstrap']);
Controller AngularJS Code
app.controller('MainController', ['$scope', '$resource', '$http', 'ProductFactory', 'EditProductFactory', '$modalInstance',
function ($scope, $resource, $http, ProductFactory, EditProductFactory, $modalInstance) {
$scope.addProduct = function () {
$scope.showAddModal = true;
var modalOptions = {
template: '/views/add.html',
controller: 'AddController'
//scope: $scope
};
$modal.open(modalOptions);
}
...
If anyone has any insights or suggestions on how to resolve this issue, I would greatly appreciate it.
Thank you.