2

我正在使用 Angular js 指令并绑定数据以显示在视图中。我有条件的看法。我使用相同的视图来读取数据以及编辑数据。我管理一个标志 edit=true 并在标志“edit”上使用 ng-switch 我更改了视图。

它在大多数时间都运行良好；但是我意识到即使场景背后的数据得到更新，某些视图也不会得到更新。我基本上做什么；在编辑模式下单击“确定”按钮；使用 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

我已经通过使用“fileId”而不是 Angular 生成的“$index”解决了这个问题。似乎 callmekatootie 解释的范围逻​​辑导致了一些更新 $index 的问题。我不确定我到底需要在哪里更改以解决 $index 问题，因此我更改了我的逻辑以使用 fileId（而不是 $index），现在它工作正常。以下是修改的 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 回答