2

ng-repeat を使用して、フィードから投稿を印刷します。

<div ng-ctrl="feedCtrl">
    <feedpost ng-repeat="post in posts"></feedpost>
</div>

フィードポスト ディレクティブは次のとおりです。

.directive('feedpost', function () {
    return {
        restrict: 'E',
        templateUrl: '/views/feed/post.html'
    }
}

フィード投稿テンプレートの簡略版は次のとおりです。

<div class="feedPost">
    <p>{{ post.content }}</p>
    <div>
        <div class="file" ng-repeat="file in post.files">{{ file.name }}</div>
    </div>
    <a ng-click="editPost()">Edit</a>
</div>

私が達成したいのは、post.html テンプレートを、編集リンクがクリックされたときに投稿を編集するためのフォームを含む editPost.html テンプレートに置き換えることです (編集が送信されたときはその逆です)。

私は解決策を見つけようとしてしばらくの間グーグルで探し回っています。私が見つけたのは、非表示のフォームと ng-show/hide を使用している人だけでしたが、もっと良い方法があれば、非表示のフォームでフィードをいっぱいにするのは気が進まないです。

<feedpost>編集リンクがクリックされたときに要素を aに変更することを考えました<editfeedpost>が、それは正しくないようです (とにかく角度でそれを行う方法がわかりません)。

4

1 に答える 1

2

ここでは経験に基づいた推測ですが、うまくいくかどうかはわかりません。

フィードポストで ng-switch ステートメントを使用し、各ポストにスコープ レベル変数を設定して、含めるテンプレートを決定することができます。スイッチ条件が満たされた場合にのみhtmlが含まれるため、ng-switchを使用しました。

これがディレクティブ テンプレートになります。

<ng-switch on="post.viewMode">
    <ng-switch when="post" ng-include="'/views/feed/post.html'">
    <ng-switch when="edit" ng-include="'/views/feed/edit.html'">
</ng-switch>

これは post.html になります。$parent を使用して、新しいスコープを作成する ng-include を説明していることに注意してください。

<div class="feedPost">
    <p>{{ post.content }}</p>
    <div>
        <div class="file" ng-repeat="file in post.files">{{ file.name }}</div>
    </div>
    <a ng-click="post.$parent.viewMode = 'edit'">Edit</a>
</div>
于 2013-06-28T18:35:35.040 に答える