Angularjs button click $mdDialog not working

Question

<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..

sorry I dont know creating 2 html page in fiddle..Yeah closed it. still not working.. — praveenkrishp
– praveenkrishp, Commented May 30, 2016 at 10:49

Aditya Singh · Accepted Answer · 2016-05-30 11:10:53Z

1

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

edited May 30, 2016 at 11:10

answered May 30, 2016 at 10:58

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Aditya Singh Over a year ago

What is the state configuration you are using? It seems then that there is an issue with the conflict between your state configuration and ng-controller. Please provide the code for state configuration to understand the issue better

Aditya Singh Over a year ago

You have used ui-view directive from ui-router which needs state configuration. Are you using the states for multiple routes/ views?

praveenkrishp Over a year ago

I dont think so. I had completely put up the code in my question.

Aditya Singh Over a year ago

Ok. That is your issue. You should not use ui-view if you don't have state configuration defined. I have updated the html code in my answer and a working codepen for your issue

praveenkrishp Over a year ago

Hi I would like to ask how to load that addnew.html as popup instead of displaying it?

|

Collectives™ on Stack Overflow

Angularjs button click $mdDialog not working

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related