Angularjs - ng-disabled不能按预期工作 [英] Angularjs - ng-disabled doesn't work as expected

问题描述

我试图在用户选择文件后禁用文件输入标记。

p>

 < div ng-controller ='firstController'> 
< div ng-controller ='secondController'> 
< input type =filename =fileupload class =theFileInputng-disabled =fileInMemory> 
< / div> 
< / div> 
  

JS，第一个控制者：

  $ scope.fileInMemory = false; //跟踪用户是否选择了要上传的文件，但没有上传它
 $ rootScope。$ on（'fileAdded'，function（）{
 $ scope.fileInMemory = true; 
 console.log（$ scope.fileInMemory）; 
}）; 
  

upload 是指令。

在页面加载时， ng-disabled 具有 false ，当 fileInMemory 被更改时，输入标记仍未被禁用。 console.log 显示 fileInMemory 的值正在改变。

我到目前为止所尝试的

 < input type =file name =fileclass =theFileInputng-disabled ='fileInMemory'> 
  

只需在 fileInMemory 是falsy。

 < input type =filename =fileclass =theFileInputng-disabled = fileInMemory =='true'> 
  

无效。



 < input type =filename =fileclass =theFileInputng-disabled ={{fileInMemory}}> 
  

仍然无效。



什么是禁用输入标记的最佳方法？

发现问题

看起来这里的问题是范围。
我的 firstController 及其范围，其内部 secondController 及其范围，并在 input tag upload 指令，这显然创建了它自己的作用域，并且没有看到 firstController 范围。

secondController 和上传是通用控制器，因此不会从 firstController 。

继承。我想我的最佳解决方案是添加 secondController 中的一些常规处理程序（基于 input 字段上的附加属性）将在需要时禁用它。

解决方案

您将不得不在这里利用 $ apply ，因为它正在被更改在事件内部：

  $ scope.fileInMemory = false; 
 $ rootScope。$ on（'fileAdded'，function（）{
 $ scope。$ apply（function（）{
 $ scope.fileInMemory = true; 
 console.log （$ scope.fileInMemory）; 
}）; 
}）; 
  

更新： code> fileInMemory 到 $ rootScope ：

  $ rootScope.fileInMemory = false; 
 $ rootScope。$ on（'fileAdded'，function（）{
 $ rootScope。$ apply（function（）{
 $ rootScope.fileInMemory = true; 
 console.log （$ scope.fileInMemory）; 
}）; 
}）; 
  

I am trying to disable file input tag, after user selected a file.

HTML:

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

JS, first 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 is a directive.

On page load, ng-disabled has false as it should, when fileInMemory is changed, input tag still not being disabled. console.log shows that the value of fileInMemory is changing as it should.

What i tried so far

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

Just disables the field right away, when fileInMemory is falsy.

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

Doesn't work.

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

Still doesn't work.

What is the best way to disable an input tag?

Found the issue

It looks like the issue here is scopes. I have firstController with its' scope, inside it secondController with its' scope, and on the input tag upload directive, which apparently creates its' own scope and doesn't see firstController scope.

secondController and upload are general controllers and therefore don't inherit from firstController.

I guess my best solution is to add some general handler in secondController, which based on additional attribute on input field will disable the it when needed.

解决方案

You're going to have to leverage $apply here because it's being changed inside of the event:

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

UPDATE: in response to an isolated-scope causing issues, move fileInMemory to the $rootScope:

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

这篇关于Angularjs - ng-disabled不能按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！