ng-click不能使用md-button

时间:2017-02-09 17:07:30

标签: angularjs angular-material

我的html和javascript如下,我有以下元素

<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>

单击时即可启用对话框,但同一页面上的以下内容不起作用。

HTML

<body ng-cloak>
  <div ng-cloak ng-controller="mainController" >
    <div layout="row" layout-align="end end">
      <md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
     </div>
   </div>
</body>

angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])

    .controller('mainController', function($scope, $mdDialog) {
    $scope.clicked = function () {
        alert('Worked!');
    };
    })

1 个答案:

答案 0 :(得分:1)

没有你的代码应该工作。请确保你加载了依赖项,如下所示,

<强>样本

// Code goes here

angular.module('webapp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
     $scope.clicked = function () {
        alert('Worked!');
    };
  });
<!DOCTYPE html>
<html ng-app="webapp">

<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
  <link rel="stylesheet" href="style.css" />
  <!-- Angular Material Dependencies -->
  <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
  <!-- Use dev version of Angular Material -->
  <script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
  <div layout="column" layout-fill flex style="max-height:100%">
    <md-toolbar>
      <md-button ng-click=clicked()>Click here</md-button>
    </md-toolbar>
  </div>
</body>
</html>