Question

我想实现一个对话框服务，它将显示带有模板和指令作为内容的$ mdDialog。我实现了如下操作。在我的服务文件中：

dialog.show = function(directive){
        $mdDialog.show({
            template: directive,
            parent: angular.element(document.body),
            clickOutsideToClose:false
        });
    };

此代码有效，但存在一些问题：

我必须在每个指令中重复对话框的页眉/页脚
我的对话框有一个滚动条，可以同时滚动页眉，页脚和内容，正确的行为是保持页眉/页脚固定并仅滚动内容

我想做的是：

service.js

import tmpl from './template.html

...

    dialog.show = function(directive){

            $mdDialog.show({
                template: temp,
                controller: function() {
                    this.directive = directive
                },
                controllerAs: 'vm',
                parent: angular.element(document.body),
                clickOutsideToClose:false
            });
        };

template.html

<md-dialog>
    <form>
        <md-toolbar>
...
        </md-toolbar>
        <md-dialog-content>
            {{vm.directive}}
        </md-dialog-content>
        <md-dialog-actions>
...
        </md-dialog-actions>
    </form>
</md-dialog>

有可能吗？如何将指令注入模板文件？

Answer 1

您可以通过为对话框的内容定义自定义指令并将其注入模板来实现此目的。例如：

<强>模态-directive.js

angular.module('yourApp')
  .directive('modalDirective', function() {
    // define directive here
  });

<强> template.html

<md-dialog>
    <form>
        <md-toolbar>
...
        </md-toolbar>
        <md-dialog-content>
            <!-- Add the directive to the template -->
            <modal-directive></modal-directive>
        </md-dialog-content>
        <md-dialog-actions>
...
        </md-dialog-actions>
    </form>
</md-dialog>

使用$ mdDialog作为模板和指令的服务

1 个答案: