Praveen Krishna P Praveen Krishna P - 6 months ago 188
AngularJS Question

Angularjs button click $mdDialog not working

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angsc.js"></script>
</head>
<body>
<main ng-app="myModule">
<div ui-view=""></div>
<main>
</body>
</html>


This is my master page

<div ng-controller="myController">
<input type="button" value="Add" ng-click="addclick()">
<input type="button" value="Search" ng-click="searchclick()">
<br/>
</div>


This is my content page.

var myApp = angular
.module("myModule",['$mdDialog'])
.controller("myController",function ($mdDialog,$scope){
$scope.addclick=function(){
$mdDialog.show({
template:'addnew.html'
});
};
$scope.searchclick=function(){
$mdDialog.show({
template:'searchold.html'
});
};
});


This is my js file.                                                                                                                                         
I also have 2 html files namely "addnew.html" and "searchold.html". Not getting pop up of those two files on button click. Is there an error in my code? Kindly help me..

Answer

Your dependent module name is wrong. Instead of $mdDialog it should be ngMaterial. $mdDialog is the service being injected in controller and is part of the ngMaterial module. Change your code as below to get it working:

var myApp = angular
        .module("myModule",['ngMaterial'])
        .controller("myController",function ($mdDialog,$scope){
            $scope.addclick=function(){
                $mdDialog.show({
                     template:'addnew.html'
                }); 
            };
            $scope.searchclick=function(){
                $mdDialog.show({
                     template:'searchold.html'
                }); 
            };
        });

HTML

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">      </script>    
  <script src="angsc.js"></script>
 </head>
 <body>
  <main ng-app="myModule">
    <div ng-controller="myController">  
      <input type="button" value="Add" ng-click="addclick()">
      <input type="button" value="Search" ng-click="searchclick()">
      <br/>
    </div>
  <main>
 </body>
 </html>

Codepen: http://codepen.io/addi90/pen/ZOEqZq