javascript - Angularjs - ng-disabled 不能按预期工作

Question

我试图在用户选择文件后禁用文件 input 标签。

HTML:

<div ng-controller='firstController'>
    <div ng-controller='secondController'>
      <input type="file" name="file" upload class="theFileInput" ng-disabled="fileInMemory">
    </div>
</div>

JS，第一个 Controller :

$scope.fileInMemory = false; // tracks if user selected a file for upload, but didn't upload it
$rootScope.$on('fileAdded', function () {
     $scope.fileInMemory = true;
     console.log($scope.fileInMemory);
});

upload 是一个指令。

在页面加载时，ng-disabled 应有 false，当 fileInMemory 更改时，input标签仍未被禁用。 console.log 显示 fileInMemory 的值正在按预期更改。

到目前为止我尝试了什么

<input type="file" name="file" class="theFileInput" ng-disabled="'fileInMemory'">

当 fileInMemory 为假时，立即禁用该字段。

<input type="file" name="file" class="theFileInput" ng-disabled="fileInMemory == 'true'">

不起作用。

<input type="file" name="file" class="theFileInput" ng-disabled="{{fileInMemory}}">

还是不行。

禁用 input 标签的最佳方法是什么？

发现问题

看起来这里的问题是作用域。我有 firstController 和它的范围，里面有 secondController 和它的范围，还有 input 标签 upload指令，它显然创建了自己的范围并且看不到 firstController 范围。

secondController 和 upload 是通用 Controller ，因此不继承自 firstController。

我想我最好的解决方案是在 secondController 中添加一些通用处理程序，它基于 input 字段上的附加属性将在需要时禁用它。

Answer 1

你将不得不在这里利用 $apply 因为它在事件内部被改变:

$scope.fileInMemory = false;
$rootScope.$on('fileAdded', function () {
    $scope.$apply(function() {
        $scope.fileInMemory = true;
        console.log($scope.fileInMemory);
    });
});

更新:为了响应导致问题的隔离范围，将 fileInMemory 移动到 $rootScope:

$rootScope.fileInMemory = false;
$rootScope.$on('fileAdded', function () {
    $rootScope.$apply(function() {
        $rootScope.fileInMemory = true;
        console.log($scope.fileInMemory);
    });
});