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);
    });
});

Answer 2

如果问题出在范围内，请尝试使用＆＃34;控制器作为＆＃34;语法：

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

链接： AngularJs "controller as" syntax - clarification?

Answer 3

你是否尝试过这样的

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

这是一个工作示例demo

Answer 4

简而言之，每个ngController都会创建一个新的子范围。 secondController创建的范围会隐藏fileInMemory firstController的值。因此，更改不会传播，其值已锁定到false。使用controllerAs语法可以轻松避免这种情况。

Answer 5

尝试以下

ng-disabled="fileInMemory"

Answer 6

使用abject而不是基本类型。

在第一个控制器中：

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

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

Answer 7

你尝试过这个：

HTML：

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

控制器：

$scope.fileInMemory = { disabled: false }; 

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

Working fiddle here

Answer 8

您的模型正在控制台上进行更改，但未在视图中进行更改，因为此更改发生在角度应用程序之外。修复它的方法是在$ rootScope上调用$ apply以确保从外部角度应用程序范围调用此事件的视图已更新。

// Something like this
$rootScope.$apply(function() {
  $rootScope.fileInMemory = true;
  // Now it'll be changed in views too
});

Angularjs - ng-disabled没有按预期工作

8 个答案: