onchange 不会改变 AngularJS 视图中的 $scope

Posted 2023-02-26

【中文标题】onchange 不会改变 AngularJS 视图中的 $scope

【英文标题】：onchange would not change $scope in AngularJS view

【发布时间】：2016-07-13 00:07:40

【问题描述】：

我有以下代码（见下文）。当我单击按钮并选择文件时，视图中的 data.myVar 保持不变。 （不知何故，我确实看到$scope.data.myVar 在单步执行控制器时会正确更新）。为什么会这样？

html摘录（它在下面的控制器下）：

data.myVar

<input type="file" onchange="angular.element(this).scope().setRuleFile(this)" />

JS：

angular.module('myModule')
    .controller('MyCtrl', ['$scope', function ($scope) 

    $scope.data = 
        myVar: 'init'
    ;

    $scope.setRuleFile = function(element) 
        $scope.data.myVar = 'changed';
    

]);

【问题讨论】：

嗯，它应该可以工作.. 控制台中的任何错误？您可以提供一个简单的演示来重现这一点。

事件在 Angular 上下文之外，所以你需要告诉 Angular 来运行摘要

使用$scope.$apply()

angular 不知道onchange ...因此，如果您修改范围使用$apply，因此angular 知道运行摘要.. 尝试$scope.data.myVar = 'changed';$scope.$apply()

@charlietfl，是正确的。检查它：plnkr.co/edit/Qv8cDpUPD5OL1VXTRpKX?p=preview

【参考方案1】：

使用指令代替它不那么笨拙。这是一个类似的问题： AngularJs: How to check for changes in file input fields?

【讨论】：

虽然我发现 Angular 不允许我将指令中的元素传递到我在范围内定义的回调中：不允许在 Angular 表达式中引用 DOM 节点！表达式：- 所以它对我不起作用。