I've been attempting to integrate an AngularJS dialog feature into my application by following the examples provided on material.angularjs.org. However, despite copying everything accurately, I am unable to get it to function. Can anyone help identify what I might be overlooking?
Below is the snippet of Javascript code:
// TABLE CONTROLS GO HERE
app.controller('AddTableController',['$scope', function($scope,$mdDialog){
$scope.allTables = tables;
//method to add tables
$scope.showAdvanced= function(ev) {
$mdDialog.show({
controller:DialogController,
templateUrl:'index_directives/dialog-add-table.html',
})
};
}]);
//HELPER METHOD FOR THE AddTableController//////////////////////////////
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
Subsequently, the function is triggered upon button click:
<md-button class="md-fab add-button" ng-click="showAlert($event)">+</md-button>
The error log in the console displays something along these lines:
TypeError: Cannot read property 'show' of undefined
at n.app.controller.$scope.showAlert (http://localhost/angular/js/app.js:24:16)
at ib.functionCall (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:199:303)
at Ec.(anonymous function).compile.d.on.f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:216:74)
at n.$get.n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15)
at n.$get.n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:241)