Question

我正在编辑文件，这里我可以更改文件名以及我可以为版本添加另一个文件，如果我选择了文件，则应立即禁用文件名编辑字段。我已尝试过以下代码，但在我在文件名字段中键入内容之前，它不会被禁用。

我的观看代码：

 <div class="ipfield">
 <label class="plclabel">Choose file</label>
 <input type="file" class="txt_box" id="newfile" 
 onchange="angular.element(this).scope().fileNameChanged()">
 </div 
 <div class="ipfield" >
 <label class="plclabel">File Name</label>
 <input type="text" class="txt_box" ng-disabled="filechoosen" ng-
 model="filenameedit" id="filenameedit">
 </div>

我的app.js

在我的控制器中，我写了函数：

$scope.filechoosen = false
    $scope.fileNameChanged = function() {
      $scope.filechoosen= true
    }

我的代码中是否有任何错误。

Answer 1

尝试ng-change

的onchange内容

<input type="file" class="txt_box" id="newfile" 
 onchange="angular.element(this).scope().fileNameChanged()">

到

<input type="file" class="txt_box" id="newfile" 
 data-ng-change="fileNameChanged()">

Answer 2

你可以在点击功能

中尝试使用$ scope。$ apply（）

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <div class="ipfield">
 <label class="plclabel">Choose file</label>
 <input type="file" class="txt_box" id="newfile" 
 onchange="angular.element(this).scope().fileNameChanged()">
 </div 
 <div class="ipfield" >
 <label class="plclabel">File Name</label>
 <input type="text" class="txt_box" ng-disabled="filechoosen" ng-
 model="filenameedit" id="filenameedit">
 </div>

</div>

</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.filechoosen = false
    $scope.fileNameChanged = function() {
      $scope.filechoosen= true
	  $scope.$apply()
    }
});
</script>

如下

Answer 3

用户@sqren（https://stackoverflow.com/users/434980/sqren）制作了一个自定义指令，这有助于解决这个问题，因为angularjs没有对文件进行任何ng-change支持。

<强> view.html

＆＃13;

<input type="file" custom-on-change="uploadFile">

＆＃13;

<强> controller.js：

＆＃13;

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});

＆＃13;

<强> directive.js：

＆＃13;

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

＆＃13;

他还创建了一个JSFiddle来帮助您理解这一点。

答案归功于@sqren，我只是在这里提到它。

有关实际答案的更多信息，请参阅此处 - https://stackoverflow.com/a/19647381/1723852

Angular中的ng-disabled无法立即生效

3 个答案: