Question

我正在尝试使用单个模态对话框功能来容纳多个模板。我发送调用以创建一个输入对话框，我试图根据该输入调用各种ng-include文件。但是，似乎永远不会调用ng-include文件。

我有什么遗失的吗？

对话呼叫

function showDialog(ev, thisItem, modalType) 
    {
        $mdDialog.show({
            controller: 'DialogController',
            controllerAs: 'vm',
            templateUrl: 'app/main/apps/views/templates.html',
            locals:{
                modalType : modalType
                thisItem : thisItem
            },
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: true
        })
        .then(function(data) {
            vm.selectedRef=data;
            // Call to server to update the references
        }, function() {

        });
    };

应该调用各种较低模板的模板

<md-dialog aria-label="" id="marginDialog" class="dialogItem" ng-cloak>

<span ng-if="vm.modalType=='bibEdit'"
      ng-include="app/main/apps/views/editReference.tmpl.html">

</span>

<span ng-include="app/main/apps/templates/editMargins.tmpl.html">

</span>

我可以确认变量到达模板并且是正确的，并且它们在控制器中是正确的。但是，简单地不调用包含文件。

Answer 1

我确实混合了包含角度材料成分的混合结果，所以我现在试着避免它。

在这种情况下我会尝试做的是编写一个函数来确定正确的模板URL，然后将其作为对话框配置对象传递：

function showDialog(ev, thisItem, modalType) 
{
    var template;
    var getTemplate = function(){
      switch(modalType){
        case 'one':
          template = 'dialog1.html';
          break;
        case 'two':
          template = 'dialog2.html';
          break;
      }      
    }();

    $mdDialog.show({
        controller: 'DialogController',
        controllerAs: 'vm',
        templateUrl: template,
        locals:{
            modalType : modalType
            thisItem : thisItem
        },
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: true
    })
    .then(function(data) {
        vm.selectedRef=data;
        // Call to server to update the references
    }, function() {

    });
};

这是一个有效的codepen

Answer 2

使用指令。这适用于md对话框。

(function() {

    // Add the directive to the module
    angular.module("YourApp").directive('editMargins', EditMarginsFactory);

    // Factory Method
    function EditMarginsFactory()
    {
        // Construct and return the instance
        return {
            restrict: 'E',
            scope: false,
            templateUrl: "app/main/apps/templates/editMargins.tmpl.html"
        };
    }

})();

然后，不要在其他模板中使用ng-include，而是执行此操作：

<edit-margins></edit-margins>

请注意，在指令中使用 scope：false 会导致它使用父作用域，即您添加指令的模板使用的作用域。

ng-include在mdDialog中不起作用

2 个答案: