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,第一控制器:

$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是一般控制器,因此不会继承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);
    });
});