Angularjs 按钮点击 $mdDialog 不工作

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>

这是我的主页

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

这是我的内容页面。

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'
                    }); 
                };
            });

这是我的js文件。我还有 2 个 html 文件，即 "addnew.html" 和 "searchold.html"。单击按钮时不会弹出这两个文件。我的代码有错误吗？请帮助我..

Answer 1

你的依赖模块名称错误。而不是 $mdDialog，它应该是 ngMaterial。 $mdDialog 是注入控制器的服务，是 ngMaterial 模块的一部分。如下更改代码以使其正常工作：

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>

代码笔：http://codepen.io/addi90/pen/ZOEqZq

Angularjs 按钮点击 $mdDialog 不工作

Angularjs button click $mdDialog not working

angularjs

mddialog