I am currently developing an Ionic application for the iPad. Within one of my templates, I have implemented a treeview with items. My goal is to open other templates modally when users click on these items. However, I encountered an error stating that $scope.modal in the controller is undefined.
Additionally, I am wondering if the loaded template can utilize its own controller?
The code snippet below represents my controller:
.controller('SystemValidateCtrl', function ($scope, $state, $stateParams, $ionicModal, ComponentTree, TypeOfTests, TypeOfTestReasons) {
$scope.showTypeOfTest = function () {
$ionicModal.fromTemplateUrl('templates/type-of-test.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
};
$scope.openModal = function () {
$scope.modal.show();
};
$scope.closeModal = function () {
$scope.modal.hide();
};
// Clean up the modal when finished!
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
// Execute action upon hiding modal
$scope.$on('modal.hidden', function () {
// Execute action
});
// Execute action upon removing modal
$scope.$on('modal.removed', function () {
// Execute action
});
$scope.$on('$ionTreeList:ItemClicked', function (event, item) {
//TODO: Show the template based on item.id
var panel_dynamic = document.getElementById('panel_dynamic_to_treeitem');
if (panel_dynamic.hasChildNodes()) {
panel_dynamic.removeChild(panel_dynamic.childNodes[0]);
}
var line = document.createElement("div");
if(item.id == 9999) //Displaying types of tests
{
$scope.showTypeOfTest();
$scope.openModal();
}
})
})