Question

我正在看一下angularjs，目前我正在创建一个html表单来更新数据库中的对象。

<input type="text" ng-model="folder.title" name="title" size="30" required>

当包含表单加载字段的页面有红色边框时，这是因为所需的标记。

我有一个控制器从休息服务获取对象，并且绑定到范围中的“folder”对象：

$scope.master = Folder.get({
            folderId : $routeParams.folderId
        }, function() {
            $scope.reset();
        });
$scope.reset = function() {
            $scope.folder = angular.copy($scope.master);
        };

这很好用。唯一的问题是，当我在浏览器中加载页面时，浏览器认为表单字段无效并显示红色边框。不到一秒钟后，文件夹对象从REST服务返回并绑定到$ scope.folder。现在，表单字段的边框从红色变为白色，因为它现在有效。

如何在显示表单之前确保文件夹对象已加载到作用域中？

我确实使用ngroute来决定显示哪个视图：

myApp.config([ '$routeProvider', function($routeProvider) {
    $routeProvider.when('/folders', {
        ...
    }).when('/folders/:folderId', {
        templateUrl : 'partials/folder-details.html',
        controller : 'FolderDetailCtrl'
    }).otherwise({
        redirectTo : '/folders'
    });
} ]);

Answer 1

您可以在ng-route中使用resolve来确保在呈现视图之前加载表单数据。请记住，这将占据整个视图，而不仅仅是表单，但这可能是您想要的。

Answer 2

未经测试，但根据文档，您可以利用ngRequired指令来完成此任务（http://docs.angularjs.org/api/ng.directive:input）：

<input type="text" ng-model="folder.title" name="title" size="30" ng-required="restLoaded">

在你的控制器中：

$scope.restLoaded=false;
$scope.master = Folder.get({
        folderId : $routeParams.folderId
    }, function() {
        $scope.restLoaded=true;
        $scope.reset();
    });

在验证/显示表单之前从REST加载对象？

2 个答案: