0

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

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

当包含表单的页面加载该字段时，有一个红色边框，这是因为必需的标签。

我有一个控制器，它从休息服务获取对象并绑定到范围内的“文件夹”对象：

$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'
    });
} ]);
4

2 回答 2

1

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

于 2013-11-05T18:24:37.793 回答
1

未经测试，但根据文档，您可以利用 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();
    });
于 2013-11-05T18:25:05.347 回答