Question

我有一个Angular指令，它读入文件<input>的内容并填充表单。目前，它似乎更新了控制器中的$scope变量，但绑定到那些$scope变量的表单元素未在视图中更新。这是为什么？

以下代码片段如下：

我的指令，用于从文件<input>读入并调用控制器$scope['modify_form']，这允许我更新与我的表单对应的$scope变量。
我的指令的HTML（视图端）
我$scope['modify_form']的控制器逻辑，它调用了一堆辅助函数，其中一个函数如下所示。
我的形式的HTML的片段;这是根本问题所在，因为当我拨打$scope['modify_form']

这是我的指示，用于阅读内容：

app.directive('modifyBtn', function($compile) {
    return {
        restrict: 'E',
        scope: {
            modifyJSON:'&modifyJson',
        },
        link: function(scope, element, attrs) {

            var fileElem = angular.element(element.find("#file_input2"));
            console.log(fileElem);

            var showUpload = function() {
                // display file input element
                var file = fileElem[0].files[0];
                var reader = new FileReader();

                reader.readAsText(file);

                reader.onload = function(e) {
                        var uploadedJSON;

                        try {
                            uploadedJSON = JSON.parse(reader.result);
                        } catch(e) {
                            // should display help block (or warning)
                            return;
                        }

                        console.log(uploadedJSON); // @debug

                        for (var key in uploadedJSON) { // only one key
                            if (uploadedJSON.hasOwnProperty(key)) {
                                sessionStorage[MODEL] = key;
                                sessionStorage[NAMESPACE] = uploadedJSON[key][NAMESPACE]

                                var fields = [FIELDS, LINKS, PRIMARY_KEY, TABLE, SQL, VALIDATIONS];

                                fields.forEach(function(field) {
                                    if (uploadedJSON[key].hasOwnProperty(field)) {
                                        sessionStorage[field] = JSON.stringify(uploadedJSON[key][field]);
                                    }
                                });

                                // trigger modification without reloading page
                                scope.modifyJSON();
                            }
                        }
                }

            };
            $(fileElem).on('change', showUpload);
        }
    }
});

我的观点（HTML），指令如下：

<modify-btn modify-json="modifyForm()">
    <li class="active">
        <span class="btn creation-btn" style="background-color: #d9534f;" ng-click="fileshow = true">
            Upload JSON
        </span>
    </li>
    <li><input type="file" id="file_input2" ng-show="fileshow" /></li>
</modify-btn>

在我的控制器中，我在这里更新绑定到表单的$scope变量：

$scope['modifyForm'] = function() { // filling in elements if reading in JSON

    modify_data();
    modify_fields();
    modify_links();
    modify_pkeys();
    modify_table();
    modify_sql();
    modify_validations();

    sessionStorage.clear();

}

function modify_data() {

    var overall = [MODEL, NAMESPACE];

    overall.forEach(function(elem) {
        if (exist(sessionStorage[elem])) {
            $scope['data'][elem] = sessionStorage[elem];
        }
    });
}

而且，在视图中，我的表单元素是如何绑定的。

 <div class="form-group">
    <label class="col-sm-4">{{myConstants["model"]}}</label>
    <div class="col-sm-6">
        <input class="form-control" type="text" ng-model="data[myConstants['model']]" id="model" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4">{{myConstants["namespace"]}}</label>
    <div class="col-sm-6">
        <input class="form-control" type="text" ng-model="data[myConstants['namespace']]" id="namespace" />
    </div>
</div>

角度双向绑定

0 个答案: