javascript - Angular 范围问题

Question

我遇到一个问题，我的 ng-controller 中的表单似乎没有像我想象的那样更改 Controller 中的属性。经过一番阅读后，我似乎并没有完全意识到原型(prototype)继承，但感谢 internet和 SO我这样更新了我的代码。但不幸的是它仍然不起作用，我不明白为什么。

这是我的 HTML

<div ng-app="licenceApp" ng-controller="licenceController">    
    <div class="hover panel" ng-class="{switch : licenceFormVisible}">
        <div class="highlightedSection nosidepad clearfix back">  
            <div class="highlightedSubSection" ng-class="{fullsize : uploadModel.active}" ng-show="!Applying && !FinishedWithErrors && !offlineActivationScreenVisible">
                <h2>Licence File</h2>
                Upload and apply a valid licence file{{uploadModel.active}}<br /><br />
                ...
                <form id="hiddenUploadForm" name="hiddenUploadForm" target="hiddenUploadFormFileTarget" action="/settings/uploadILP" method="post" enctype="multipart/form-data" style="display: none;">
                    <input id="hiddenUploadFormFile" name="file" type="file" ng-model="uploadModel.uploadFileName" onchange="angular.element(this).scope().uploadFileChanged()" />
                    <iframe id="hiddenUploadFormFileTarget" name="hiddenUploadFormFileTarget" iframe-onload="uploadFileFinished()"></iframe>
                </form>
            </div>
        </div>
    </div>

View 模型

angular.module('licenceApp.controllers', [])
    .controller('licenceController', ['$scope', 'licenceAPIservice', '$filter', '$timeout', function ($scope, licenceAPIservice, $filter, $timeout) {
        $scope.uploadModel = {
            active: false,
            uploadFileName: "",
            uploading: false
        };

        $scope.uploadFileChanged = function () {
            $scope.uploadModel.active = true;
            $scope.uploadModel.uploading = true;

            $('#hiddenUploadForm').submit();
        }
        ...

因此，当我在函数中更改 uploadModel.active 时，它会通过 console.log 显示正确的值，但显示不会模仿新值!我在这里仍然受到原型(prototype)继承的影响吗？请注意，当输入文件控件更改时，会触发 uploadFileChanged。

Answer 1

onchange 是 Angular 之外的 JavaScript 事件，因此您需要调用 $apply 来通知 Angular 范围内的更改。幸运的是，有一个 Angular Directive(指令)可以为您做到这一点( ng-change )。

<input id="hiddenUploadFormFile" 
       name="file" type="file" 
       ng-model="uploadModel.uploadFileName"
       ng-change="uploadFileChanged()" />

编辑:

ngModel 不适用于输入 type=file ( issue )，因此 ngChange 将无法工作，因为它需要 ngModel 才能工作。

正确的处理方法是在 uploadFileChanged 函数中调用 $apply。

HTML:

<input id="hiddenUploadFormFile" 
       name="file" type="file" 
       onchange="angular.element(this).scope().uploadFileChanged()"/>

JS:

    $scope.uploadFileChanged = function () {
        $scope.$apply(function() {
          $scope.uploadModel.active = true;
          $scope.uploadModel.uploading = true;
          $('#hiddenUploadForm').submit();
        });
    }

如果您计划使用输入类型文件，那么创建一个简单的指令来处理更改事件可能会有所帮助，而无需以这种方式访问​​元素范围。