2

我正在尝试使用单个模式对话框功能来容纳多个模板。我发送调用以创建对话框作为输入，并尝试根据该输入调用各种 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>

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

4

2 回答 2

0

将 ng-includes 与有角材料组件混合时，我的结果非常复杂，所以通常我现在尽量避免使用它。

在这种情况下，我会尝试编写一个函数来确定正确的模板 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

于 2016-08-20T04:11:36.533 回答
0

使用指令。这在 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会导致它使用父作用域，即您将指令添加到的模板所使用的作用域。

于 2017-06-22T20:50:48.830 回答