0

I have a popup in which I want to display a template based on what the user selects.

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

Here is an example template (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>

Here is one of the functions that triggers the modal:

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

I'm trying to do this through a directive:

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;
                    });
                });
        }
    };
});

I either get

ReferenceError: scope is not defined

or

Error: [$http:badreq] http://errors.angularjs.org/1.7.0/$http/badreq?p0=undefined" when the page gets loaded.

I also tried the suggestions in this post: 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;
                    });
                });
        }
    };
});

but I just end up with this error on page load:

Error: [$templateRequest:tpload] http://errors.angularjs.org/1.7.0/$templateRequest/tpload?p0=%7B%7BselectedTemplate%7D%7D&p1=404&p2=Not%20Found

How do I dynamically change the templateUrl depending on what template I want to display? I've already looked at the other examples and they don't seem to be working for me.

Chris
  • 650
  • 7
  • 20

1 Answers1

0

Argh. After a lot of trial and error:

<dmodal visible="$root.showMiscModal">

</dmodal>

Template file:

<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>

Directive:

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;
                    });
                });
        }
    };
});

Functions:

$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;
    };
Chris
  • 650
  • 7
  • 20