如何在 AngularJS 自定义指令中重新加载 templateUrl？答案

【问题标题】：How to reload templateUrl in AngularJS custom directive?如何在 AngularJS 自定义指令中重新加载 templateUrl？
【发布时间】：2018-03-31 17:56:07
【问题描述】：

在自定义指令中，我正在更新范围（为了更新范围（“orderItem”），我单击 HTML 文件（templateUrl）上的按钮，该按钮调用函数来更新范围）并显示在 templateUrl 中，所以为此我需要重新加载 html 页面 (templateUrl) 如何重新加载它？以下是我的示例代码。

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

【问题讨论】：

在容器中格式化您的代码，谢谢。
我已经编辑了帖子并添加了html文件
当我将你的函数更改为 loadHistory(); 它对我有用，请查看。
对不起，我更新了 loadHistory()，当我调用此方法时，我使用 Rest 获取数据，并使用该数据更新 orderItem 范围。但无法反映在html页面中。
@rupeshkumar 您没有提供足够的信息，并且您链接的代码没有语法，我们从您那里寻找更多信息。

标签： angularjs

【解决方案1】：

您的代码运行良好。

如果我对你的神秘 REST 调用进行了适当的更改，那么模板会相应地更改，因为$scope.$apply(); 具有在每次 json 调用后更新控制器的角色。

check here希望对您有所帮助。

【讨论】：