Question

在自定义指令中我正在更新范围（更新范围（“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]

Answer 1

您的代码运行正常。

如果我通过对其进行适当更改来解决您的神秘REST调用，模板会相应更改，因为$scope.$apply();具有角色，可以在每次json调用后更新控制器。

check here我希望有所帮助。

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

1 个答案: