Question

我有一个包含多个视图的单页应用。在一个视图中，我列出了所有order，在另一个页面上，我修改了这些order。我希望能够在两个页面之间进行操作，而无需将任何数据保存到数据库中。在我的开发框中，这很好用。我只是将orders保存在$window上，当我加载详情页面时，我会查看window.orders。大。但是，部署后，我的所有链接都会像链接到新页面一样...因此页面会重新加载。这意味着当我尝试从主列表页面链接到我的详细信息页面时，详细信息页面无法访问window上的任何内容。不是单页应用程序的重点，它在更改视图时不会重新加载页面吗？如何获取我的链接以不加载新页面？它们全部采用<a href="#!/<view>">text</a>。

的格式

所以这是我的orders-list.template.html：

的一部分

<table class="table-bordered" id="TheTable">
    <tr>
        <th>Part #</th>
        <th>Customer</th>
        <th>Job #</th>
        <th>Due Date</th>
        <th ng-repeat="day in days" class="td-nowrap">{{day}}</th>
    </tr>
    <tr ng-repeat="order in orders | orderBy:'DueDate'">
        <th><a href="#!/orders/{{order.ID}}">{{order.PartNumber}}</a></th>
        <td>{{order.Customer}}</td>
        <td class="td-nowrap">{{order.JobNumber}}</td>
        <td>{{order.DueDate|date:'shortDate'}}</td>
        <td ng-repeat="day in days">
            <input type="number" style="width:60px;" ng-model="order.Weeks[day].Pieces" ng-change="calculateHoursOfWork();"/>
            {{(order | runTimePlusSetupPlusEfficiency:options:order.Weeks[day].Pieces) | number:3}}
        </td>
    </tr>
</table>

请注意，部件号是指向#!/orders/{{order.ID}}的链接。我的印象是这个链接不会重新加载网页。

这是我的主要脚本：

            $routeProvider.
                when("/orders", {
                    template: "<orders-list></orders-list>"
                }).
                when("/orders/:orderId", {
                    template: "<order-detail></order-detail>"
                }).
                when("/options", {
                    template: "<options></options>"
                }).
                when("/printable", {
                    template: "<orders-printable></orders-printable>"
                }).
                otherwise("/orders");

所以应该清楚/orders引用我的ordersDetail组件。这是其中的一部分：

angular.module("orderDetail").component("orderDetail", {
    templateUrl: "AngularModules/order-detail/order-detail.template.html",
    controller: ['$routeParams', "$http", "$window", function OrderDetailController($routeParams, $http, $window) {
        var self = this;
        self.TotalNonSetupRunTime = 0.0;
        self.options = $window.options;

        self.order = null;
        $.each($window.orders, function (idx, elem) {
            if (elem.ID == $routeParams.orderId) {
                self.order = elem;
            }
        });
        if (self.order === null) {
            var orderID = null;
            if ($routeParams.hasOwnProperty('orderId')) {
                orderID = $routeParams.orderId;
            }
            var windowOrders = "undefined";
            if ($window.hasOwnProperty('orders')) {
                windowOrders = $window.orders.length;
            }
            alert("couldn't find order " + orderID + " among " + windowOrders + " orders! try going back and selecting again.");
        }
    }]
});

因为页面正在重新加载，我将windowOrders视为undefined。在IIS中是否有一些设置我可以更改以链接到#<something>而不重新加载页面（如预期的那样）？还是我必须在angularJS方面做点什么？

进一步混淆......我确实找到了这个：hash link reloads page并且显然有一个<base>指令螺钉吗？有角度安全的方法吗？我不认为摆脱该指令是有意义的。我实际上是在asp.net-MVC页面上写这个，所以我有

<base ng-href="@Url.HttpRouteUrl("Default", new { }).Replace("?httproute=True", "")" />

在我的_Layout.cshtml页面中。这种方式在部署时（到http://<server>/<app>/），它就像我调试时一样（在locahost:<some port>/上）。

有时当我点击AngularJS链接时，页面会重新加载

0 个答案: