ng-click不会在md-dialog中调用函数

时间:2016-08-17 20:29:25

标签: angularjs angularjs-ng-click mddialog

我在md-dialog中有ng-click问题。 这是我的HTML代码

dialog.html

  <md-dialog-content layout="column">
    <div class="md-dialog-content">
      <md-input-container>
        <label>Title</label>
        <input ng-model="vm.newMovie.title"/>
      </md-input-container>
      <md-input-container>
        <label>Year</label>
        <input ng-model="vm.newMovie.year"/>
      </md-input-container>
      <md-input-container>
        <label>ID</label>
        <input ng-model="vm.newMovie.id"/>
      </md-input-container>
      <md-button class="md-raised" ng-click="vm.test()">HEHEHE</md-button>
      <md-dialog-actions>
        <md-button ng-click="vm.addMovie()" class="md-raised md-primary">Add Movie</md-button>
      </md-dialog-actions>
    </div>
  </md-dialog-content>

dialog.controller.js

(function() {
  'use strict';

  angular
    .module('app.movies')
    .controller('DialogController', DialogController);

  /** @ngInject */
  function DialogController($http) {
    var vm = this;

    vm.newMovie = {};

    function trolo() {
      console.log('dasa');
    }

    vm.test = function() {
      console.log('test test');
    }

    vm.addMovie = function() {
      console.log(vm.newMovie);
      $http.post('http://192.168.0.12:3000/movies/' + vm.newMovie.title + '/' + vm.newMovie.year + "/" + vm.newMovie.id).then(function(response) {
        console.log(vm.newMovie.title);
      });
    }
  }
})();

movie.controller.js

function() {
  'use strict';

  angular
    .module('app.movies')
    .controller('MoviesController', MoviesController);

  /** @ngInject */
  function MoviesController($http, $mdDialog, toastr) {
    var vm = this;
    vm.showDialog = function($event) {
      $mdDialog
        .show({
          clickOutsideToClose: true,
          escapeToClose: true,
          targetEvent: $event,
          controller: 'DialogController',
          templateUrl: 'app/main/movies/dialogAddMovie.html'
        })
        .finally(function() {
          alert = undefined;
        });
    }
  }
})();

函数showDialog工作正常,但永远不会调用应用于ng-click的方法。请帮忙。感谢

1 个答案:

答案 0 :(得分:2)

您错过了在controllerAs方法对象中定义$mdDialog.show(控制器的别名)属性。正如您已经定义的那样vm(控制器别名)。

<强>代码

vm.showDialog = function($event) {
  $mdDialog
    .show({
      clickOutsideToClose: true,
      escapeToClose: true,
      targetEvent: $event,
      controller: 'DialogController',
      templateUrl: 'app/main/movies/dialogAddMovie.html',
      controllerAs: 'vm' //<--- provide an alias to `DialogController` before using it.
    })
    .finally(function() {
      alert = undefined;
    });
}