Angularjs,解析所有XMLHttpRequest(XHR)时捕获的最佳方法是什么?

时间:2015-06-16 23:44:26

标签: angularjs xmlhttprequest

使用Angularjs,

我希望隐藏ng-view直到所有XHR都已解决。因为默认情况下,视图将在XHR仍在解析时显示。

当XHR不快时(例如:.net IIS应用程序预热)这是一个问题,并且在XHR解决之前屏幕显示给用户。

问题的一个例子:我有一个屏幕,其中包含从XHR填充的选择列表和一个使用从XHR返回的数据构建的锚点href字符串。如果用户在XHR解析之前尝试使用选择列表或单击锚点,则会出现意外行为。一个空的选择列表。一个无法正常工作的锚。

我宁愿不使用ng-show或ng-disable以及控制器中的一堆标志和逻辑来丢弃视图。

我的想法是隐藏整个ng-view,直到所有XHR都被解析,然后显示ng-view。这样我就可以避免使用属性乱丢模板,并避免在控制器中难以维护复杂的逻辑。

我认为angular不会提供我可以使用$ on捕获的事件,因此这不是解决方案。

我想出了这个,但我不确定这是做我想做的最好的方法。你觉得怎么样?

纳克视

package test;

import java.io.File;
import java.io.IOException;

public class FilePaths {

    public static void main(String[] args) throws IOException {

        String[] fileArray = { 
                "C:\\projects\\workspace\\testing\\f1\\f2\\f3\\file5.txt", 
                "folder/file3.txt",
                "../testing/file1.txt", 
                "../testing", 
                "f1/f2"
        };

        for (String f : fileArray) {
            displayInfo(f);
        }

    }

    public static void displayInfo(String f) throws IOException {
        File file = new File(f);
        System.out.println("========================================");
        System.out.println("          name:" + file.getName());
        System.out.println("  is directory:" + file.isDirectory());
        System.out.println("        exists:" + file.exists());
        System.out.println("          path:" + file.getPath());
        System.out.println(" absolute file:" + file.getAbsoluteFile());
        System.out.println(" absolute path:" + file.getAbsolutePath());
        System.out.println("canonical file:" + file.getCanonicalFile());
        System.out.println("canonical path:" + file.getCanonicalPath());
    }

}

家长控制器

_.debounce = function (func) { return function () { func.apply(this, arguments);}; };

xhrService

<div ng-controller="parentController">

    <div class="ng-cloak"
         ng-cloak
         ng-view
         ng-show="dataReady">
    </div>

</div>

儿童控制器

angular.module("myApp").controller("parentController",
    ["$scope"
    function ($scope) {

        $scope.$on("$routeChangeStart", function () {
            $scope.dataReady = false;
        });

        $scope.$on("loading:dataReady", function () {
            console.log("Data Ready");
            $scope.dataReady = true;
        });

    }
]);

0 个答案:

没有答案