0

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

我的查看代码：

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

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

4

3 回答 3

0

您能否在 click 函数中尝试使用 $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>

如下

于 2018-03-21T07:05:21.293 回答
0

尝试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()">
于 2018-03-21T06:25:37.943 回答
0

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

视图.html

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

控制器.js：

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

指令.js：

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

    }
  };
});

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

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

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

于 2018-03-21T07:13:08.250 回答