0

人を作成する標準的な工場がある場合は、次のように言います。

      $scope.person = Person.get({person: $routeParams.person},function () {
  },function (httpResponse) {
  });

私のHTMLは：

<div>Person is: {{person}}</div>

かなり簡単です。私の問題はレンダリングにあります。私の理解では、これが実行されると、すぐに空のオブジェクトが返されます。非同期getが最終的に戻ると、 が入力され$scope.person、再レンダリングされます。

  1. Person is:これが としてレンダリングしてからとして再レンダリングするのを妨げているのは何Person is: Johnですか? 私はその空白が欲しくありません。どちらかといえば、「ロード」を表示し、レンダリングが完了したときにそれを変更したいと考えています。
  2. エラーを処理するにはどうすればよいですか? 404 を受け取った場合 (個人 ID が存在しないと言う)、「申し訳ありませんが、要求したユーザーは存在しません」という何らかの形式を表示したいと考えています。しかし、人がロードされるのを待っている間に誤ってレンダリングするのではなく、実際に試した後にのみ表示されることを確認したい.
4

2 に答える 2

3

これをどのように処理したか：

  • busyディレクティブを実装しました。あなたの場合、それは次のように適用されます：

    <div busy="!person.$resolved">Person is: {{person.name}}</div>

    （私は人を少し変えて、オブジェクトにしていることにも注意してください）

  • ビジー ディレクティブの実装は多かれ少なかれ次のようになります (jQuery を使用しています)。

    app.directive("busy", function() {
    return {
        restrict: "A",
        link: function(scope,element,attrs) {
            var wrapper = element.wrap("<div class="busy-wrapper"></div>");
            scope.$watch(attrs.busy, function(busy) {
                if( busy ) wrapper.addClass("busy");
                else wrapper.removeClass("busy");
            });
        }
    });
});

  • そしてCSS：

    .busy-wrapper.busy * {
    display: none; /* we hide the content when busy */
}
.busy-wrapper.busy {
    /* display a spinner */
    background: white url("my-busy-spinner.gif") no-repeat center;
    height: 50px; /* Depends... */
}

  • エラーをキャッチすると、リソース オブジェクト (ここでは人物) に$error=true属性を付けます。

    $scope.person = Person.get(...,
    function() { /* success */ },
    function(response) {
        $scope.person.$error = true; // and maybe more stuff from the response, e.g. a $message attribute
    }
);

    $error属性をどのように処理するかは、コンテキストによって異なります。出力を非表示にして「再試行」リンクを表示することがあります。例:

    <div ng-if="!person.$error" busy="!person.$resolved">Person is: {{person.name}}</div>
<div ng-if="person.$error">Something bad happened. <a ng-click="retry()">Retry!</a></div>

これは正確なコードではありませんが、一般的なアイデアが得られると思います。また、これが唯一の正しいアプローチではありません (私は他の人に興味があります)。ああ、アニメーション/トランジションの追加など、あらゆる種類の素晴らしいことをビジーにすることができます。

于 2013-09-28T19:22:58.963 に答える