javascript - Md-dialog 未加载与其关联的控制器

Question

我正在尝试在单击按钮时在角度 js1.5 中加载 md-dialog，我看到的只是模式弹出中的 html 标记，而不是该组件的控制器加载。以下是我显示 调用对话框的 md-dialog 文件的标记

 $mdDialog.show ({
        template: require('../traderdialog/traderdialog.html'),
        controller: Controller,
        controllerAs: 'vm',
        locals : {
            traderId : traderId
        },
        clickOutsideToClose : true
        });
    }

因此，当我执行控制器：控制器时，它会像我在目录结构中那样转到不同的组件。我的 traderdialog.js 代码如下

 angular.module('dashboard')
.component('traderdialog', {
    template: require('./traderdialog.html'),
    controller: Controller,
    controllerAs: 'vm',
    bindings: {

    }
});

function Controller( $mdDialog) { *some code* }

Answer 1

在 mdDialog 中有两种使用控制器的方法，其中一种是在保留范围内使用与父级相同的范围：

$mdDialog.show({
          controller: function () {
            return self;
          },
          templateUrl: 'templates/mdDialog.html',
          parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose: false,
          bindToController: true,
          scope: $scope,
          hasBackdrop: true,
          preserveScope: true
        });

另一种是与 controllerAs 属性一起使用，并对其进行初始化：

$mdDialog.show({
        controller: DialogController,
        templateUrl: 'templates/mdDialog.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose: true,
        controllerAs: 'DlgCtrl',
        bindToController: true,
        locals: {
          formData: $scope.formData,
        }
      })

您可以使用 DlgCtrl.formData 语法联系当地人。

Answer 2

您应该将所需的数据从父控制器注入到模态的范围内。当模式打开时，它有自己的范围。

$mdDialog.show ({
    template: require('../traderdialog/traderdialog.html'),
    controller: 'MyCtrl',
    locals : {
        traderId : traderId
    },
    clickOutsideToClose : true
    });
}

现在，让我们为您定义您的控制器 modal traderdialog.html。

angular.module('app').controller('MyCtrl',['traderId', function(traderId){
    console.log(traderId);
}]);

现在traderId将反映您的模态。

Answer 3

$mdDialog.show ({
        template: require('../traderdialog/traderdialog.html'),
        controller: function ControllerName($scope){
                    $scope.data = "Controller Loaded";
         },
        locals : {
            traderId : traderId
        },
        clickOutsideToClose : true
        });
    }

或者

 $mdDialog.show ({
            template: require('../traderdialog/traderdialog.html'),
            controller: controllerName,
            locals : {
                traderId : traderId
            },
            clickOutsideToClose : true
            });
        }
    function controllerName($scope){
                        $scope.data = "Controller Loaded";
             }