Question

我有一个弹出窗口，我想根据用户选择的内容显示模板。

<misc-Modal visible="showMiscModal" template="{{selectedTemplate}}">

这是一个示例模板（CustomerContact.html）：

<div class="modal fade">
<div class="modal-dialog my-order-grid-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
            <span>this is the Customer Contact template</span>
        </div>
    </div>
</div>

这是触发模式的功能之一：

        $scope.showCustomerContact = function() {
        alert("showing customer contact");
        $scope.selectedTemplate = "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/CustomerContact.html";
        $rootScope.showMiscModal = true;
    };

我正在尝试通过指令执行此操作：

angular.module("aps").directive("pmodal",
function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: true,
        templateUrl: scope.selectedTemplate,
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.visible,
                function(value) {
                    if (value === true)
                        $(element).modal("show");
                    else
                        $(element).modal("hide");
                });

            $(element).on("shown.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = true;
                    });
                });

            $(element).on("hidden.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = false;
                        $scope.showPdfModal=false;
                    });
                });
        }
    };
});

我要么得到

ReferenceError：未定义范围

或

错误：[$ http：badreq] http://errors.angularjs.org/1.7.0/ $ http / badreq？p0 = undefined“ 页面被加载。

我也尝试了这篇文章中的建议：Angular.js directive dynamic templateURL

<misc-Modal visible="$root.showMiscModal"  template-url="selectedTemplate">

angular.module("aps").directive("miscModal",
function() {
    return {             
        restrict: "E",
        templateUrl: function(elem, attrs) {
            return attrs.templateUrl || "some/path/default.html";
        },
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.visible,
                function(value) {
                    if (value === true)
                        $(element).modal("show");
                    else
                        $(element).modal("hide");
                });


            $(element).on("shown.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = true;
                    });
                });

            $(element).on("hidden.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = false;
                        $rootScope.showMiscModal = false;
                    });
                });
        }
    };
});

但是我最终在页面加载时遇到此错误：

错误：[$ templateRequest：tpload] http://errors.angularjs.org/1.7.0/ $ templateRequest / tpload？p0 =％7B％7BselectedTemplate％7D％7D＆p1 = 404＆p2 = Not％20Found

如何根据要显示的模板动态更改templateUrl？我已经看过其他示例，但它们似乎对我没有用。

Answer 1

啊。经过大量的反复试验：

<dmodal visible="$root.showMiscModal">

</dmodal>

模板文件：

<style>
@media (min-width: 768px) {
    .modal-dialog {
        width: 800px !important;
        margin: 30px auto;
    }
}

<span>this is the Status Changes template test4</span>
<div><span style="float:left;width:150px">Name</span>&nbsp;<span style="float:left; width:150px">Date</span>&nbsp;<span style="float: left;     width:50px">Old</span>&nbsp;<span style="float: left;     width:50px">New</span>&nbsp;Note</div>
<div ng-repeat="s in statusChanges">
        <span style="float:left;width:150px">{{s.Name}}</span>&nbsp;<span style="float:left; width:150px">{{s.ChangeDate|date:"MM/dd/yyyy HH:mm"}}    </span>&nbsp;<span style="float: left; width:50px">{{s.OldStatus}}</span>&nbsp;<span     style="float: left; width:50px">{{s.NewStatus}}</span>&nbsp;{{s.Note}}
</div>

指令：

angular.module("aps").directive("dmodal",
function($rootScope) {
    return {
       template:'<div class="modal fade">' +
            '<div class="modal-dialog">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
            "</div>" +
            '<div class="modal-body" ng-include="selectedTemplate"></div>' +
            "</div>" +
            "</div>" +
            "</div>",

        restrict: "E",
        transclude: false,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.visible,
                function(value) {
                    if (value === true)
                        $(element).modal("show");
                    else
                        $(element).modal("hide");
                });

            $(element).on("shown.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = true;
                    });
                });

            $(element).on("hidden.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = false;
                        $rootScope.showMiscModal=false;
                    });
                });
        }
    };
});

功能：

$scope.showInternalNotes = function() {
    $rootScope.showMiscModal = true;
    $scope.selectedTemplate = "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/InternalNotes.html?"+Math.floor((Math.random() * 10000000) + 1);
    $scope.getStatusChanges()
};

$scope.showCustomerContact = function() {
    $rootScope.showMiscModal = true;
    $scope.selectedTemplate= "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/CustomerContact.html?"+Math.floor((Math.random() * 10000000) + 1);
    $scope.getStatusChanges()
};

$scope.showStatusChanges = function() {
    $rootScope.showMiscModal = true;
    $scope.selectedTemplate = "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/StatusChanges.html?"+Math.floor((Math.random() * 10000000) + 1);
   $scope.getStatusChanges();
};

Ajax：

    $scope.getStatusChanges = function() {
        const deferred = $q.defer();
        const successFunction = function(response) {
            if (!checkLogin(response, "getStatusChanges")) return;
            $scope.statusChanges = response.data;
            //alert(JSON.stringify(response.data));
            deferred.resolve();
        };

        const failureFunction = function(data) {
            console.log(`Error${angular.toJson(data)}`);
            deferred.reject();
        };
        TechSheetFactory.getStatusChanges(successFunction, failureFunction,$scope.TechSheetInfo.WorkOrder.WorkOrderID);
        return deferred.promise;
    };

基于变量的AngularJS div模板

1 个答案: