load template url by ajax call in angular js

Question

I want to send an ajax request to get jsp/html page for templateurl of modal. I have written by code like this.

 var modalInstance = $uibModal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'pages/recordingDetailPopup .jsp',
                    controller: 'FileDetailCtrl',
                    size: 'lg',
                    resolve: {
                        activeRecords: function () {
                            return inbnoxList;
                        }
                    }
                });

But I want to do something like thing like this

 var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: function(){
                $http.get('fileDetailJsp');
                },
                controller: 'FileDetailCtrl',
                size: 'lg',
                resolve: {
                    activeRecords: function () {
                        return inbnoxList;
                    }
                }
            });

How can I implement this functionality.Please suggest.

What would $http.get('fileDetailJsp') return? I guess it's not the template itself. Does the template URL change dynamically? Is this an indirection to return the name of the template to be used...? If so, you'd need something like $http.get('fileDetailJsp').then(function(response) { $uibModal.open(...use something from response...); }); — pdenes
– pdenes, Commented Nov 24, 2015 at 10:16
$http.get('fileDetailJsp') will return path of the template file that will be used in template url — Keshav
– Keshav, Commented Nov 24, 2015 at 10:17

Chandan · Accepted Answer · 2015-11-24 10:53:00Z

1

templateUrl in your second snippet will return a promise and not the response of the jsp file.

In above scenario, you will need to first get the response from jsp and then invoke .open method on modal like below -

$http.get('fileDetailJsp').then(function(url){
      var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: url,
            controller: 'FileDetailCtrl',
            size: 'lg',
            resolve: {
                activeRecords: function () {
                    return inbnoxList;
                }
            }
        });
}, function(){
  // error here
 });

Hope this helps...

edited Nov 24, 2015 at 10:53

answered Nov 24, 2015 at 10:47

Chandan

1,1389 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keshav Over a year ago

hi it works but how to do this ion app.js where I have done state routing.

Qianyue · Accepted Answer · 2015-11-24 10:34:55Z

0

When you call $http.get('fileDetailJsp');}, it returns a Promise. The moment that you call the $uibModal.open, the Promise is not prepared yet. That's why you get nothing. As @pdenes mentions that, you need something like :

$http.get('fileDetailJsp').then(function(response) {
   $uibModal.open(...use something from response...); 
});

answered Nov 24, 2015 at 10:34

Qianyue

1,78719 silver badges24 bronze badges

6 Comments

Keshav Over a year ago

how to get template url in app.js file where i have done state routing??

Qianyue Over a year ago

@Keshav $http.get() is to get the data from the server side, in which I thought your url stocks. But you mean the url is in the app.js? So why would you change your codes?

Keshav Over a year ago

I have to get templateurl from server by sending $http request.How will i do this??

Qianyue Over a year ago

@Keshav you don't have to get the url from server, your first scenario works fine. so why would you change your scenario?

Keshav Over a year ago

Its my requirement that get templateurl from $http request.It is mention in angular doc that i can call a function on angular templateurl but i could not understand how?? Wiil you see this link and suggest me docs.angularjs.org/api/ngRoute/provider/$routeProvider

|

Collectives™ on Stack Overflow

load template url by ajax call in angular js

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related