【问题标题】:The angularjs dialog doesn't seem to work for meangularjs 对话框似乎对我不起作用
【发布时间】:2015-04-28 22:02:46
【问题描述】:

我一直在尝试在我的应用程序中实现 AngularJS 对话框,我复制了 material.angularjs.org 中提供的演示中的所有内容,但我似乎无法使其工作。谁能看到我错过了什么?

这是 Javascript 代码:

  // TABLE CONTROLLS GO HERE 
app.controller('AddTableController',['$scope', function($scope,$mdDialog){
        $scope.allTables = tables;
        //method to add tables 
        $scope.showAdvanced= function(ev) {
            $mdDialog.show({
              controller:DialogController,
              templateUrl:'index_directives/dialog-add-table.html',
            })
        };
}]);
//HELPER METHOD FOR THE AddTableController//////////////////////////////
function DialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

然后在按钮单击时调用该函数:

<md-button class="md-fab add-button" ng-click="showAlert($event)">+</md-button>

从控制台的错误日志中,我得到如下信息:

TypeError: Cannot read property 'show' of undefined
    at n.app.controller.$scope.showAlert (http://localhost/angular/js/app.js:24:16)
    at ib.functionCall (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:199:303)
    at Ec.(anonymous function).compile.d.on.f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:216:74)
    at n.$get.n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15)
    at n.$get.n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:241)

【问题讨论】:

    标签: javascript angularjs dialog angularjs-material


    【解决方案1】:

    你忘了定义 $mdDialog 依赖:

    app.controller('AddTableController',['$scope', '$mdDialog', function($scope,$mdDialog){
    

    由于忘记定义依赖注入是很常见的,您可能会对@Michael Benford 的this suggestion 感兴趣,了解 ng-annotate。

    【讨论】:

    • 谢谢丹尼尔,由于一些奇怪的原因,我在没有意识到的情况下在另一个控制器中添加了依赖项。谢谢!
    • 不客气@KushtrimAbdiu。请注意,我已对答案进行了修改。
    猜你喜欢
    • 1970-01-01
    • 2011-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-05
    • 2023-04-03
    相关资源
    最近更新 更多