Question

使用Angular 1.5和Material Design，我创建了一个组件，代表一个用于创建foobar的面板，带有＆＃34;取消＆＃34;按钮。显然，小组不知道它是否在对话框中，所以＆＃34;取消＆＃34;按钮只是调用回调。具体而言，＆＃34;取消＆＃34;按钮调用控制器的cancel()方法，然后尝试调用oncancel()回调：

angular.module("NewFooBarPanel", [])
    .component("newFoobarPanel", {
        templateUrl: "newfoobar-template.html",
        bindings: {
            onCancel: "&"
        },
        controller: function() {
            var controller = this;

            controller.cancel = function() {
                controller.clearForm();
                controller.onCancel({});
            }

在封闭组件中，当单击FAB时，我会调出一个mdDialog;该对话框包含newFoobarPanel：

angular.module("FoobarList", ["NewFooBarPanel"])
    .component("foobarList", {
        templateUrl: "foobarlist-template.html",
        controller: function($mdDialog) {

            this.addFoobar = function(ev) {

                $mdDialog.show({
                        template: "<md-dialog aria-label='Add Foobar'><new-foobar-panel on-cancel='alert(\"need to cancel\")'></new-foobar-panel></md-dialog>",
                        targetEvent: ev,
                        clickOutsideToClose: true,
                        fullscreen: true
                    });

当我单击取消按钮时，表单被清除，因此我知道正在调用newFoobarPanel控制器的cancel()方法。但是我没有看到警告对话框，因此出于某种原因，on-cancel中的<new-foobar-panel on-cancel='alert(\"need to cancel\")'></new-foobar-panel>回调似乎没有被调用。

这是一个复杂的东西（即使它是一个简单，直接的用例），在组件内部的对话框内部有一个组件。我似乎已经将问题缩小到调用回调。我哪里出错了？

所以我决定将mdDialog完全取出。现在我只需将newFoobarPanel直接嵌入到foobarList组件中：

<new-foobar-panel on-cancel='alert("need to cancel")'></new-foobar-panel>

现在这只是组件内部的组件，但我还没有看到警告对话框。为什么不调用回调？

Answer 1

事实证明问题不在于没有调用回调。问题是如何识别它。显然alert()在这种情况下不起作用。

所以我必须在mdDialog中添加一个控制器，然后向$scope添加一个方法来接收回调：

                $mdDialog.show({
                        controller: function($scope, $log) {
                          $scope.notify=function() {
                            $log.debug("need to cancel");
                          }
                        },
                        template: "<md-dialog aria-label='Add Foobar'><new-foobar-panel on-cancel='notify()'></new-foobar-panel></md-dialog>",
                        targetEvent: ev,
                        clickOutsideToClose: true,
                        fullscreen: true
                    });

现在，当嵌入式组件调用回调时，对话框控制器会记录一条消息！太好了！

如果有更好的方法在这里添加控制器方法（我可以依赖this吗？）而不是注入$scope，请告诉我。

（现在我需要弄清楚如何从控制器关闭mdDialog，但这是一个单独的问题。）

从组件内部组件或mdDialog

1 个答案: