Question

我正在使用某些SO答案建议的指令访问我选择的文件，并且我能够在指令中控制我的文件名。现在我想将该名称绑定到该指令的html .....如何我可以这样做吗？

输入

后查看p标签

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <input type="file" myfilename />
  <P>{{files[0].name}}</p>
  </body>
<script>
  
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

});
app.directive('myfilename', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
               scope.files = evt.target.files;
                console.log(scope.files[0].name);
                
            });
        }
    };
}]);
  </script>
</html>

Answer 1

在scope.files = evt.target.files之后添加范围。$ apply（）;在直接的。

它没有立即显示更新值的原因是因为2路绑定仅在摘要周期期间更新父级（或指令的使用者范围）范围的绑定值。触发ng-click后会发生摘要循环。因此控制器中的$ scope.files尚未更新。您可以通过使用超时来以多种方式解决此问题，该超时会将操作推迟到摘要周期结束时运行。您也可以通过设置一个将值保存为双向绑定属性的对象来完成此操作。由于双向绑定属性和父作用域共享相同的对象引用，因此您将立即看到更改。

这是完整的代码

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <input type="file" myfilename />
  <P>{{files[0].name}}</p>
  </body>
<script>

  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

});
app.directive('myfilename', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
               scope.files = evt.target.files;
               scope.$apply();
                console.log(scope.files[0].name);

            });
        }
    };
}]);
  </script>
</html>

从指令绑定或打印

1 个答案: