Question

我正在使用Angular Material，并在TasksCtrl中有一个打开$ mdDialog的动作 - 使用locals属性传递一个对象，该对象在被发送回视图之前将在DialogCtrl中修改。

但是，.then（）回调不会在ng-click上触发。如果我硬编码在对话框中的其他地方打印出来的范围变量，我可以看到ng-click更改了值，但是获取.then（）的唯一方法是点击模态外部。

TasksController（作为TasksCtrl）

(function() {

    angular.module('ICP_App')
        .controller('TasksController', function(ToggleService, TasksService, $mdToast, $mdDialog) {
            var vm = this;
            vm.createTaskAttachment = function(ev) {
                $mdDialog.show({
                    controller: 'DialogController',
                    controllerAs: 'DialogCtrl',
                    templateUrl: '../partials/dialogs/create-task-attachment.tmpl.html',
                    locals: {
                        data: vm.selectedTask
                    },
                    parent: angular.element(document.body),
                    targetEvent: ev,
                    clickOutsideToClose:true
                })
                    .then(function(answer) {
                        alert('you submitted');
                    }, function() {
                        alert('you cancelled it');
                    });
            };
        })


})();

DialogController（作为DialogCtrl）

(function() {

    angular.module('ICP_App')
        .controller('DialogController', function(data) {
            var vm = this;
            vm.selectedTask = data;
            vm.tempAttachments = [];

             vm.addTempAttachment = function(keypress, type) {

                if (keypress.which === 13) {
                    if (type == 'link') {
                        vm.tempLinkAttachment.category = 'link';
                        vm.tempAttachments.push(vm.tempLinkAttachment);
                        vm.tempLinkAttachment = {};
                    }
                }
             };

        })


})();

$ mdDialog的模板文件

<md-dialog aria-label="Create Attachment" flex-gt-sm="50">
    <form>
        <md-toolbar>

            <div class="md-toolbar-tools">
                <h2>Add New Attachment</h2>
                <span flex></span>
            </div>
        </md-toolbar>
        <md-dialog-content>
            <md-tabs md-dynamic-height md-border-bottom>
                <md-tab label="Link">
                    <md-content class="md-padding">
                        <div layout="row">

                            <div flex>

                                <!-- Add new action -->
                                <div layout="column" layout-gt-xs="row" class="new-entry-line">

                                    <div flex-gt-sm="50">

                                        <md-input-container class="md-block">

                                            <input ng-model="DialogCtrl.tempLinkAttachment.Title" placeholder="Title...">

                                        </md-input-container>

                                    </div>

                                    <div flex-gt-sm="50">

                                        <md-input-container class="md-block">

                                            <input ng-model="DialogCtrl.tempLinkAttachment.Link" placeholder="Link..." ng-keypress="DialogCtrl.addTempAttachment($event, 'link')">

                                        </md-input-container>

                                    </div>

                                </div>

                            </div>

                        </div>
                        <div layout="row">
                            <div flex>
                                <md-list>
                                    <md-list-item md-2-line ng-repeat="attachment in DialogCtrl.tempAttachments | filter: {'category': 'link'}">
                                        <md-icon md-svg-icon="content:ic_link_24px"></md-icon>
                                        <p>{{ attachment.title }}</p>
                                    </md-list-item>
                                </md-list>
                            </div>
                        </div>
                    </md-content>
                </md-tab>
                <md-tab label="File">
                    <md-content class="md-padding">
                        <div layout="row" layout-align="center">
                                <md-button flex="30" class="md-primary md-raised">Upload</md-button>
                        </div>

                    </md-content>
                </md-tab>


            </md-tabs>

        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button ng-click="answer('Not useful')">
                Not Useful
            </md-button>
            <md-button ng-click="answer('Useful')">
                Useful
            </md-button>
        </md-dialog-actions>
    </form>
</md-dialog>

Answer 1

这是我将对话框中的数据传递给主控制器的方法 - CodePen

使用

$scope，如docs中所述：

注意：将 preserveScope 设置为true非常重要。

JS

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

.controller('TasksController', function($scope, $mdDialog) {
  var vm = this;
  vm.createTaskAttachment = function(ev) {
    $mdDialog.show({
      controller: 'DialogController',
      controllerAs: 'DialogCtrl',
      templateUrl: 'create-task-attachment.tmpl.html',
      parent: angular.element(document.body),
      scope: $scope,
      preserveScope: true,
      targetEvent: ev,
      clickOutsideToClose:true
    })
      .then(function(answer) {
      alert('you submitted - ' + answer);
    }, function() {
      alert('you cancelled it');
    });
  };

  $scope.$watch("vm.selectedTask", function () {
    if (angular.isDefined(vm.selectedTask)) {
      $mdDialog.hide(vm.selectedTask);
    }
  })
})

.controller('DialogController', function($scope, $mdDialog) {
  $scope.answer = function(answer) {
    $scope.vm.selectedTask = answer;
  }
})

ng-click不会触发$ mdDialog回调

1 个答案: