Question

我有一个问题，即ng-controller中的表单似乎没有改变控制器中我认为会出现的属性。经过一些阅读后，我似乎并不完全了解原型继承，但感谢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>

视图模型

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显示正确的值，但显示不会模仿新值！我还在这里接受原型继承吗？请注意，更改输入文件控件时会遇到uploadFileChanged。

Answer 1

onchange是一个角度以外的javascript事件，因此您需要调用$apply来通知角度范围内的更改。幸运的是，有一个角度指令可以为你做到这一点（ng-change）。

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

编辑：

ngModel不能与input 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();
        });
    }

如果您打算使用输入类型文件，则可能需要创建一个处理change事件的简单指令，而无需以这种方式访问元素范围。

角度范围问题

1 个答案: