Angularjs按钮单击$ mdDialog无法正常工作

时间:2016-05-30 10:45:45

标签: angularjs mddialog

<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”。按钮点击不会弹出这两个文件。我的代码中有错误吗?请帮帮我......

1 个答案:

答案 0 :(得分: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>

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

相关问题