How to reload templateUrl in AngularJS custom directive?

Question

In a custom directive I am updating the scope (to update the scope("orderItem") I click on button on HTML file(templateUrl) which call the function to update the scope ) and displaying in the templateUrl, so for this I need to reload the html page (templateUrl) how to reload it ? following is my sample code.

        ##main.js

            .directive('orderItemDetails', function () {
                return {
                 restrict: 'E',
                 scope: {
                  orderItem: '=', // this scope is injected from some other js file.   
                 },
                    templateUrl: 'orders/orderItemDetails/orderItemDetails.html', // in this html file i am displaying the "orderItem" (scope) data.

                    // RUPESH
                    controller: function ($scope) {
                        $scope.loadHistory = function () { // function loadHistory() is called when button on  orderItemDetails.html is clicked

                            // from REST call i get data here, using this data i update the "orderItem" scope.
                            function (data) {
                                $scope.orderItem.history = data.statusHistory;// here i am updating the "orderItem" (scope). 
                                $scope.$apply();

                            },
                            function (code, text, xhr) {

                            });
                        }
                    }
                };
            })


    // here the scope orderItem is injected before calling the loadHistory() method
        ##details.html  

        <order-item-details> // again this data comes from somewhere else
            order-item="selectedOrderComponents.fulfilmentOrderItem.data">
        </order-item-details>

    // following html file include the html file which displays the data
        ##orderItemDetails.html
                    <ng-include src="'orders/orderItemDetails/orderItemHistory.html'"></ng-include>

        ##orderItemHistory.html  // the file to display the data         
            <button class="btn btn-default" ng-click="loadHistory()">Load History<i class="fa fa-refresh"></i>
            </button>

            <table>

                <tbody>
               // here from scope "orderItem" the data is displyed 
                <tr ng-repeat="statusChange in orderItem.orderItem.history.statusChanges">
                    <td>{{statusChange.changeDate  | date: dateMask}}</td>
                    <td>{{statusChange.status}}</td>
                    <td>{{statusChange.subStatus}}</td>
                    <td>{{statusChange.errorCode}}</td>
                    <td>{{statusChange.errorDescription}}</td>
                </tr>
                </tbody>
            </table>


        I want the updated "orderItem" (scope) value to be displayed in the  orderItemDetails.html file.
        but its not working right now. whats wrong ?

        [I am using AngularJS 1]

when i change your function to loadHistory(); it works for me, check out. — Abr001am
– Abr001am, Commented Mar 31, 2018 at 18:51
sorry i updated that, loadHistory(), when i call this method then i get data using Rest , and i update orderItem scope with that data. but unable to reflect in html page. — rupesh kumar
– rupesh kumar, Commented Mar 31, 2018 at 18:52
@rupeshkumar you haven't provided sufficient infos, and the code you linked is not syntactic, we look for more infos from your side. — Abr001am
– Abr001am, Commented Mar 31, 2018 at 19:13

Abr001am · Accepted Answer · 2018-03-31 23:02:08Z

0

Your code works fine.

If I work off your mysterious REST call with my proper changes into it, the template gets changed accordingly because $scope.$apply(); has for role to update the controller after each json call.

check here I hope that helps.

edited Mar 31, 2018 at 23:02

answered Mar 31, 2018 at 22:31

Abr001am

5916 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to reload templateUrl in AngularJS custom directive?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related