angularjs - Angular js 数据绑定(bind)不会间歇性更新 View

Question

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

它在大多数情况下都运行良好；但是我意识到，即使场景背后的数据得到更新，某些 View 也不会更新。我基本上做什么；在编辑模式下单击“确定”按钮；使用 ng-click 我更改了标志 edit=undefined ，并且由于数据发生更改，因此我的假设是它将更改 View 。它在大多数情况下确实有效，但突然停止工作。我通过打印数据检查了控制台，我看到 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，并且我肯定犯了一些基本错误。请帮忙。

Answer 1

为什么 View 无法正确更新

以下是 Controller 的范围最初的样子:

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

现在，当您添加 ng-switch 指令时，该指令会创建一个新作用域。该作用域继承了父作用域的所有属性:

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

请注意，它也具有 files 属性/模型 - 这绑定(bind)到父范围的 files 属性。但是，这是一种单向绑定(bind) - 对父级的更新将反射(reflect)在子级中，但对子级的更新不会反射(reflect)在父级中。

现在，当单击发生并且您希望从编辑模式切换到显示模式时，会发生的情况是您正在更改子作用域的 files 属性，而不是父作用域 - 文件父作用域上的仍处于“编辑”模式 - ng-switch 指令仍然引用父作用域上的 file 属性，因此不会发生切换。

如何解决此问题
当我要求您删除不必要的代码时，这只是为了易读性和更容易理解，但这不是解决方案。您已经很好地更新了代码，这导致了问题的原因。然而，仍然存在一些失败的情况。例如，您如何定义范围的 files 模型？它似乎没有在指令中定义 - 只是修改了。你能提供这些信息吗？

同时，如果我对问题的分析是正确的，则将 addFile 函数中出现的 scope.files 替换为 scope.$parent。 files - 我认为这应该可以解决问题 - 它应该更新父 Controller 范围内的文件状态，因此应该由 ng-switch 指令拾取，从而更新您的正确查看。