2

私はAngular jsディレクティブを使用しており、データをバインドしてビューに表示しています。私は条件付きビューを持っています。データの読み取りと編集に同じビューを使用しています。フラグ edit=true を管理し、ng-switch on flag "edit" を使用してビューを変更します。

ほとんどの場合、うまく機能します。しかし、バックグラウンドのデータが更新されても、一部のビューが更新されないことに気付きました。私が基本的にしていること; 編集モードで「OK」ボタンをクリックしたとき。ng-click を使用して、フラグ edit=undefined を変更しました。データが変更されるため、ビューが変更されると思います。それは確かにほとんどの場合機能しますが、突然機能しなくなります。データを印刷してコンソールを確認したところ、ng-click が実際にフラグを正しく更新していることがわかります。以下はコードの抜粋です。

ビュー コード* [更新] *:

<!--In case of edit render it as text box-->
                <ng:switch on="file.edit">
                <div ng:switch-when="true">

                        <input type="text" ng-model="file.name"  class="file-label" value="{{file.name}}" />   
                        <i class="icon-ok" ng-click="addFile({{$index}})"></i>
                        <i class="icon-remove" ng-click="cancelAddFile({{$index}})"></i>

                </div>          
                <div ng:switch-when="undefined">
                    <!--if it is not edit case then render as label-->


                    <!--Add file name as a label-->                                 
                    <span class="file-label" >{{file.name}}</span>                                                           




                </div>

                </ng:switch>

以下はディレクティブ コードの抜粋です* [更新] *。

//project directive as element for project contents
app.directive("projectcontents", ['Contents', function (projectContents) {
    return {
        restrict: "E",
        templateUrl: "/xopus/view/projectstructure/ProjectContents.html",
        replace: true,
        scope: {
            project: '='
        },
        link: function (scope, element, attrs) {


            /*Edit file in project*/
            scope.editFile = function (fileIndex) {
                //print log for debug purpose
                console.log("Edit file at index " + fileIndex);                
                //make service call

                //update edit flag
                scope.files[fileIndex].edit = true;

            };

            /*Remove file in project*/
            scope.deleteFile = function (fileIndex) {
                //make service call
                //print log for debug purpose
                console.log("Remove file at index " + fileIndex);  
                //Remove this file entry form data model
                scope.files.splice(fileIndex, 1);

            };



            /*Add file in project*/
            scope.addFile = function (fileIndex) {
                //print log for debug purpose
                console.log("Add file at index " + fileIndex);  
                //make service call

                //update data binding to update edit=false


                //update edit flag
                scope.files[fileIndex].edit = undefined;

            };


            /*Cancel add file */
            scope.cancelAddFile = function (fileIndex) {
                //print log for debug purpose
                console.log("Cancel file at index " + fileIndex);  
                //Remove this file entry form data model
                scope.files.splice(fileIndex, 1);
            };



        }
    };
} ]);

私はまだAngularを学んでおり、基本的な間違いを犯していると確信しています。助けてください。

4

2 に答える 2

1

Angular によって生成された「$index」の代わりに「fileId」を使用して、この問題を修正しました。callmekatootie で説明されているスコープ ロジックにより、$index の更新に何らかの問題が発生しているようです。$index の問題を修正するために正確にどこを変更する必要があるのか​​わからないため、($index の代わりに) fileId を使用するようにロジックを変更したところ、正常に動作しています。以下は変更された addFile() です

/*Add file in project*/
            scope.addFile = function (fileId) {                
                //find out index of given file ID
                var fileIndex = scope.getFileIndex(fileId);
                //update data binding to update edit=false              
                scope.files[fileIndex].edit = undefined;

            };


 /*Get Index of file in files object */
            scope.getFileIndex = function (fileId) {
                //print log for debug purpose
                console.log("Get file index for fileId " + fileId);
                //find out index of given file ID
                var fileIndex = undefined;
                for (var i = 0; i < scope.files.length; i++) {
                    if (scope.files[i]._id === fileId) {
                        fileIndex = i;
                        break;
                    }
                }

                return fileIndex;
            };

これが完璧な方法かどうかはわかりません。

于 2013-08-26T15:54:50.350 に答える
1

ビューが正しく更新されない理由

以下は、コントローラーのスコープが最初にどのように見えるかです。

//Parent scope
$scope = {
   ...
   files: [..]
   ...
}

ディレクティブを追加するとng-switch、このディレクティブによって新しいスコープが作成されます。このスコープは、親スコープのすべてのプロパティを継承します。

//Child scope
$scope = {
    ...
    files: [...]
    ...
}

プロパティ / モデルもあることに注意してください。これは、親スコープfilesのプロパティにバインドされています。filesただし、これは一方向のバインドです。親への更新は子に反映されますが、子への更新は親には反映されません。

ここで、クリックが発生し、編集モードから表示モードに切り替えたい場合files、親スコープではなく子スコープのプロパティを変更していることになります-親スコープのファイルはまだ「編集」にありますmode -ng-switchディレクティブはまだfile親スコープのプロパティを参照しているため、切り替えは行われません。

この問題を修正する方法
不要なコードを削除するように依頼したとき、それは読みやすさと理解を容易にするためだけであり、解決策ではありませんでした。問題の原因となったコードを適切に更新しました。とはいえ、負け組もまだまだあります。たとえばfiles、スコープのモデルをどのように定義していますか? ディレクティブで定義されていないようです-変更されただけです。その情報を提供できますか？

それまでの間、問題の私の分析が正しければ、関数scope.files内の発生を次のように置き換えます-これでうまくいくと思います-親コントローラーのスコープ内のファイルの状態を更新する必要があるため、これにより、ビューが正しく更新されます。addFilescope.$parent.filesng-switch

于 2013-08-25T18:24:35.567 に答える