ディレクティブからバインドまたはプリント

私は選択したファイルにいくつかのSOの回答で示唆されているようにアクセスしています。私はそのディレクティブのファイル名をコンソールすることができます。 ....どうやってやるの？？ディレクティブからバインドまたはプリント

ちょうどスコープを追加

<!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="[email protected]" 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>

出典

2016-12-23 Sa E Chowdary

入力した後、pタグを参照してください$がscope.files = evt.target.files後に（）を適用します。ディレクティブで。

2ウェイバインディングは、ダイジェストサイクル中にのみ親（またはディレクティブのコンシューマスコープ）スコープのバインド値を更新するため、更新された値がすぐに表示されないのは理由によるものです。ダイジェストサイクルは、クリックがトリガーされた後に発生します。したがって、コントローラの$ 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="[email protected]" 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>

出典

2016-12-23 07:36:24

のおかげで、あなたは2ウェイバウンドプロパティーので。2ウェイバインドプロパティとして値を保持するオブジェクトを設定することによって、それをも行うことができます」のように、あなたは言及しました親スコープが同じオブジェクト参照を共有すると、すぐに変更が表示されます。 ".....私は理論を持つ貧しい学生です。この実用的なコードを表示できますか？ –

ディレクティブからバインドまたはプリント

答えて

関連する問題