AngularJs: ফাইল ইনপুট ক্ষেত্রে পরিবর্তনগুলি কীভাবে পরীক্ষা করতে হয়?

Question

আমি কৌণিক নতুন। এইচটিএমএল 'ফাইল' ক্ষেত্র থেকে আপলোড করা ফাইলের পাঠটি পড়ার চেষ্টা করছি যখনই এই ক্ষেত্রে কোনও 'পরিবর্তন' ঘটে। আমি যদি 'অন চেঞ্জ' ব্যবহার করি তবে এটি কাজ করে তবে আমি যখন এনজি-চেঞ্জ ব্যবহার করে কৌণিকভাবে এটি ব্যবহার করি তবে এটি কাজ করে না।

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged () কখনই কল করে না। ফায়ারব্যাগও কোনও ত্রুটি দেখায় না।

Comments

: হতে পারে সহায়ক stackoverflow.com/q/17063000/983992

— মার্সেল Gwerder

এই দেখুন stackoverflow.com/questions/16631702/file-pick-with-angular-js

— tliokos

Answer 1

ফাইল আপলোড নিয়ন্ত্রণের জন্য কোনও বাঁধাই সমর্থন নেই

https://github.com/angular/angular.js/issues/1375

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

পরিবর্তে

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

আপনি কি চেষ্টা করে দেখবেন

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

দ্রষ্টব্য: এটিতে কৌণিক অ্যাপ্লিকেশনটি সর্বদা ডিবাগ মোডে থাকা প্রয়োজন । ডিবাগ মোড অক্ষম করা থাকলে এটি প্রোডাকশন কোডে কাজ করবে না।

এবং আপনার ফাংশন পরিবর্তে পরিবর্তিত হয়

$scope.fileNameChanged = function() {
   alert("select file");
}

আপনি কি চেষ্টা করে দেখবেন

$scope.fileNameChanged = function() {
  console.log("select file");
}

নীচে ড্র্যাগ ড্রপ ফাইল আপলোড সহ ফাইল আপলোডের একটি কার্যকারী উদাহরণ হ'ল http://jsfiddle.net/danielzen/utp7j/

কৌণিক ফাইল আপলোড তথ্য

এএসপি.নেটে অ্যাঙ্গুলারজেএস ফাইল আপলোডের জন্য URL URL

http://cgeers.com/2013/05/03/angularjs-file-upload/

নোডজেএস-এর সাথে অগ্রগতির সাথে অ্যাঙ্গুলারজে দেশীয় মাল্টি-ফাইল আপলোড

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

এনজিপলোড - আইফ্রেমে ব্যবহার করে ফাইল আপলোড করার জন্য একটি অ্যাঙ্গুলারজেএস পরিষেবা

http://ngmodules.org/modules/ngUpload

Comments

অনচেঞ্জ = "অ্যাঙ্গুলার.এলিমেন্ট (এটি) .স্কোপ ()। ফাইলনামচাজড (এটি)" $ અવકાશ। You আপনি দুটি জায়গায় পরিবর্তন এবং চেক করতে পারেন? ব্রাউজারের উপর নির্ভর করে আপনি ফাইলটির পুরো পথটি পাবেন যা আমি নীচের ফিডলটি

— JQuery গুরু

এই পদ্ধতিটি ডিফল্ট অ্যাঙ্গুলারজেএস প্রসেসিংকে বিচ্ছিন্ন করে, তাই $ সুযোগ $ ডাইজেস্ট () বলা হয় না (বাইন্ডিংগুলি আপডেট হয় না)। পরে 'অ্যাঙ্গুলার.এলিমেন্ট (এটি) .স্কোপ ()। Gest ডাইজেস্ট ()' কল করুন বা স্কোপ পদ্ধতিতে কল করুন যা uses প্রয়োগ হয়।

— রামন ডি ক্লেইন

এটি একটি ভয়াবহ উত্তর। কৌনিক.এলিমেন্ট (ব্লাহ) .স্কোপ () কল করা একটি ডিবাগ বৈশিষ্ট্য যা আপনার কেবলমাত্র ডিবাগিংয়ের জন্য ব্যবহার করা উচিত। কৌণিক .স্কোপ বৈশিষ্ট্যটি ব্যবহার করে না। এটি কেবলমাত্র বিকাশকারীদের ডিবাগ করতে সহায়তা করতে পারে। আপনি যখন নিজের অ্যাপটি তৈরি করেন এবং উত্পাদনে স্থাপন করেন, তখন আপনার ডিবাগ তথ্য বন্ধ করার কথা। এটি আপনার সমস্ত অনেক গতি বাড়িয়ে তোলে !!! সুতরাং, এলিমেন্ট.স্কোপ () কলগুলির উপর নির্ভরশীল কোডটি লিখতে একটি খারাপ ধারণা। এটি করবেন না। একটি কাস্টম নির্দেশিকা তৈরির উত্তরটি হ'ল এটি করার সঠিক উপায়। @ জ্যাকিউরিগুরু আপনার উত্তরটি আপডেট করা উচিত। কারণ এতে সবচেয়ে বেশি ভোট রয়েছে, লোকেরা এই খারাপ পরামর্শটি অনুসরণ করবে।

— ফ্রস্টি

ডিবাগ তথ্য অক্ষম করা থাকলে এই সমাধান অ্যাপ্লিকেশনটিকে ভেঙে দেবে। উত্পাদনের জন্য এটি অক্ষম করা একটি অফিসিয়াল সুপারিশ ডক্স.আঙ্গুলারজেএস.আর / গাইড / প্রোডাকশন । দয়া করে আরও দেখুন blog.thoughtram.io/angularjs/2014/12/22/…

— উইহেরেক

খারাপ সমাধান ... ... 'ডিবাগিং বন্ধ করা' সম্পর্কে অন্যান্য মন্তব্যগুলি পড়ুন ... ... ... এবং sqrenএর সমাধান দেখুন ... ... ... @ 0 এমভি 1

— ডিএসডিএসএসএসডিএস

Answer 2

আমি ফাইল ইনপুট পরিবর্তনগুলি শুনতে একটি ছোট্ট নির্দেশনা তৈরি করেছি made

জেএসফিডল দেখুন

view.html:

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

controller.js:

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

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

    }
  };
});

Comments

এটি প্রতিটি সময় আলাদা ফাইল চয়ন করা ভাল কাজ করে। একই ফাইলটিও যখন নির্বাচন করা হয় তখন কী শুনতে পারা যায়?

— জেডগ

এটির মধ্যে একটি অত্যন্ত দুর্ভাগ্যজনক "বাগ" রয়েছে - কন্ট্রোলঅনচেঞ্জারে কন্ট্রোলার "এই" হিসাবে আবদ্ধ হয় না, তবে ফাইল ইনপুট! এটি আমাকে দীর্ঘ সময়ের জন্য ছুড়ে ফেলেছিল এবং আমি প্রকৃত বাগটি খুঁজে পাইনি। সঠিকভাবে "এটি" সেট করে কীভাবে এটি কল করবেন তা আমি এখনও নিশ্চিত নই।

— ক্যারেল বালেক

আজকের মতো ক্রোম বা ফায়ারফক্সে আমার পক্ষে কাজ করবে না।

— সেগুসো

এই উত্তরটি @ কারেলবালেকের বক্তব্য অনুসারে ত্রুটিযুক্ত। আমি এটি পেতে পারি না এবং কৌনিক-ফাইল-আপলোড ব্যবহার করার সিদ্ধান্ত নিয়েছিলাম।

— গুণার গেসনার

এটি একেবারে কীভাবে করা যায়, যাদুর মতো কাজ করে। এছাড়াও, আপনি কেন উত্পাদনে একটি ডিবাগ বৈশিষ্ট্যটি ব্যবহার করবেন?

— জাস্টিন ক্রুস

Answer 3

এটি আশেপাশের অন্যান্য কয়েকটিগুলির একটি পরিমার্জন, ডেটা একটি এনজি-মডেলে শেষ হবে, যা সাধারণত আপনি চান।

মার্কআপ (কেবল একটি বিশিষ্ট ডেটা-ফাইল তৈরি করুন যাতে নির্দেশিকা এটি খুঁজে পেতে পারে)

<input
    data-file
    id="id_image" name="image"
    ng-model="my_image_model" type="file">

জাতীয়

app.directive('file', function() {
    return {
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel){
            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            });
        }
    };
});

Comments

হয় $scope.$apply();প্রয়োজনীয়? আমার ng-changeইভেন্টটি এখনও এগুলি ছাড়া আগত বলে মনে হচ্ছে।

— সারি 1

@ সারি 1 আপনার কেবলমাত্র প্রয়োগ প্রয়োগ করতে হবে যদি সেই অপারেশন চলাকালীন আপনার যদি অন্যান্য কৌণিক জিনিসগুলি সম্পর্কে এটি জানতে হবে ।

— স্কট তরোয়াল

Answer 4

পরিষ্কার উপায় হ'ল "পরিবর্তন" ইভেন্টের সাথে আবদ্ধ হওয়ার জন্য আপনার নিজের নির্দেশিকা লিখতে। কেবল আপনাকে জানাতে আই 99 ফর্মডাটা সমর্থন করে না তাই আপনি পরিবর্তন ইভেন্ট থেকে ফাইল বস্তুটি সত্যই পেতে পারবেন না।

আপনি এনজি-ফাইল-আপলোড লাইব্রেরি ব্যবহার করতে পারেন যা ইতিমধ্যে ফাইলএপিআই পলিফিল সহ আইই সমর্থন করে এবং সার্ভারে ফাইল পোস্ট করা সহজ করে। এটি অর্জনের জন্য এটি একটি নির্দেশিকা ব্যবহার করে।

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

জাতীয়:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

Comments

এই উদাহরণটি পুরানো। ডক্স থেকে এখানে একটি নতুন পান ।

— গুণার গেসনার

Answer 5

ফাইল ইনপুটটির জন্য দ্বি-মুখী বন্ধন যুক্ত করার জন্য আমি @ স্টার্ট অ্যাকসনের ধারণাকে প্রসারিত করেছি (উদাহরণস্বরূপ মডেলটির মানটি পুনরায় সেট করে ইনপুটটিকে পুনরায় সেট করার অনুমতি দিন):

app.directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        link: function ($scope, el, attrs, ngModel) {
            el.bind('change', function (event) {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$apply();
            });

            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}]);

ডেমো

Comments

আপনাকে @ জেএলআরিশ ধন্যবাদ। একটি নোট, আসলে data-ng-click="vm.theFile=''"ভাল কাজ করে, একটি নিয়ামক পদ্ধতিতে এটি লেখার দরকার নেই

— সের্গেই

Answer 6

এখানে অন্যান্য বেশ কয়েকটি উত্তরের মতো, আমি এই সমস্যাটি সমাধান করার জন্য একটি নির্দেশিকা লিখেছিলাম, তবে এই বাস্তবায়ন ঘটনাগুলিকে সংযুক্ত করার কৌণিক উপায়ে আরও ঘনিষ্ঠভাবে আয়না করে।

আপনি এর মতো নির্দেশিকা ব্যবহার করতে পারেন:

এইচটিএমএল

<input type="file" file-change="yourHandler($event, files)" />

আপনি দেখতে পাচ্ছেন, আপনি আপনার ইভেন্ট হ্যান্ডলারের মধ্যে বাছাই করা ফাইলগুলি ইনজেক্ট করতে পারেন, কারণ আপনি কোনও এনজি ইভেন্ট হ্যান্ডলারের মধ্যে কোনও $ ইভেন্ট অবজেক্টটি ইনজেক্ট করবেন।

জাভাস্ক্রিপ্ট

angular
  .module('yourModule')
  .directive('fileChange', ['$parse', function($parse) {

    return {
      require: 'ngModel',
      restrict: 'A',
      link: function ($scope, element, attrs, ngModel) {

        // Get the function provided in the file-change attribute.
        // Note the attribute has become an angular expression,
        // which is what we are parsing. The provided handler is 
        // wrapped up in an outer function (attrHandler) - we'll 
        // call the provided event handler inside the handler()
        // function below.
        var attrHandler = $parse(attrs['fileChange']);

        // This is a wrapper handler which will be attached to the
        // HTML change event.
        var handler = function (e) {

          $scope.$apply(function () {

            // Execute the provided handler in the directive's scope.
            // The files variable will be available for consumption
            // by the event handler.
            attrHandler($scope, { $event: e, files: e.target.files });
          });
        };

        // Attach the handler to the HTML change event 
        element[0].addEventListener('change', handler, false);
      }
    };
  }]);

Comments

আমি আপনার উত্তরটি চেষ্টা না করা পর্যন্ত এটি নিয়ে কয়েক দিন লড়াই করেছি। ধন্যবাদ!

— মাইকেল ট্রানকিডা

আমি কীভাবে fileChangeএক্সপ্রেশনটিতে একটি অতিরিক্ত পরামিতি পাস করতে পারি ? আমি এটির ভিতরে এই নির্দেশিকাটি ব্যবহার করছি ng-repeatএবং $scopeভেরিয়েবলটি attrHandlerপ্রতিটি রেকর্ডের জন্য একই রকম। সবচেয়ে ভাল সমাধান কি?

Answer 7

এই নির্দেশটি নির্বাচিত ফাইলগুলিকেও পাস করে:

/**
 *File Input - custom call when the file has changed
 */
.directive('onFileChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.onFileChange);

      element.bind('change', function() {
        scope.$apply(function() {
          var files = element[0].files;
          if (files) {
            onChangeHandler(files);
          }
        });
      });

    }
  };
});

এইচটিএমএল, কীভাবে এটি ব্যবহার করবেন:

<input type="file" ng-model="file" on-file-change="onFilesSelected">

আমার নিয়ামক:

$scope.onFilesSelected = function(files) {
     console.log("files - " + files);
};

Comments

আপনার নিয়ামকটিতে কীভাবে $ স্কোপ.অনফিলসিলাইস্ট দেখাচ্ছে?

— ইনগাহাম

যদি কোনও ফাইল খোলা থাকে এবং আমরা যখন মাইক্রোসফ্ট এজ ব্রাউজারে ফাইলটি আপলোড করার চেষ্টা করি। কিছুই ঘটছে নাহ. তুমি কি সাহায্য করতে পারো?

— নবীন কটকম

হ্যাঁ, এটি অন্যান্য ব্রাউজারগুলির সাথে দুর্দান্ত কাজ করছে। আমি মাইক্রোসফ্ট প্রান্তে @ ইঙ্গাহামে সমস্যার মুখোমুখি হচ্ছি

— নবীন কাতকম

Answer 8

আমি একটি নির্দেশিকা তৈরি করার পরামর্শ দিই

<input type="file" custom-on-change handler="functionToBeCalled(params)">

app.directive('customOnChange', [function() {
        'use strict';

        return {
            restrict: "A",

            scope: {
                handler: '&'
            },
            link: function(scope, element){

                element.change(function(event){
                    scope.$apply(function(){
                        var params = {event: event, el: element};
                        scope.handler({params: params});
                    });
                });
            }

        };
    }]);

এই নির্দেশিকাটি বহুবার ব্যবহার করা যেতে পারে, এটি তার নিজস্ব সুযোগ ব্যবহার করে এবং পিতামাতার স্কোপের উপর নির্ভর করে না। আপনি হ্যান্ডলার ফাংশনটিতে কিছু প্যারামও দিতে পারেন। হ্যান্ডলারের ফাংশনটি স্কোপ অবজেক্টের সাথে ডাকা হবে, আপনি যখন ইনপুট পরিবর্তন করেছিলেন তখন এটি সক্রিয় ছিল। change প্রতিবার পরিবর্তনের ইভেন্টটি বলার সময় আপনার মডেলটিকে আপডেটগুলি প্রয়োগ করুন

Answer 9

সহজ কৌণিক jqLite সংস্করণ।

জাতীয়:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

এইচটিএমএল:

<input type="file" data-c-on-change="your.functionName()">

Comments

যদি কোনও ফাইল খোলা থাকে এবং আমরা যখন মাইক্রোসফ্ট এজ ব্রাউজারে ফাইলটি আপলোড করার চেষ্টা করি। কিছুই ঘটছে নাহ. তুমি কি সাহায্য করতে পারো?

— নবীন কাতকাম

Answer 10

"ফাইল-ইনপুট" নির্দেশকের কার্যক্ষম ডেমো যা ¹ দিয়ে কাজ করেng-change

কোনও <input type=file>উপাদানকে এনজি-চেঞ্জের নির্দেশিকা তৈরি করার জন্য এটির একটি কাস্টম নির্দেশিকা দরকার যা এনজি-মডেল নির্দেশের সাথে কাজ করে ।

<input type="file" files-input ng-model="fileList" 
       ng-change="onInputChange()" multiple />

ডেমো

angular.module("app",[])
.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

.controller("ctrl", function($scope) {
     $scope.onInputChange = function() {
         console.log("input change");
     };
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileList" 
           ng-change="onInputChange()" multiple />
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>

Comments

দুর্দান্ত তবে নির্দেশকে কেবল একবার বলা হয়! আমি যদি নির্বাচিত ফাইলটি পরিবর্তন করি তবে নির্দেশকে দ্বিতীয়বার বলা হয় না! এই আচরণ সম্পর্কে আপনার কোনও ধারণা আছে?

— hugsbrugs

ডেমোর সমস্যা নেই। পাঠকদের পরীক্ষা করার জন্য পুনরুত্পাদনযোগ্য উদাহরণ সহ একটি নতুন প্রশ্ন তৈরি করুন ।

— জর্জিওগ

হ্যাঁ এতে সমস্যাটি রয়েছে কনসোল লগ "ইনপুট পরিবর্তন" কেবল একবার প্রদর্শিত হয় আপনি নির্বাচিত ফাইলগুলি বহুবার পরিবর্তন করলেও!

— আলিঙ্গনগুলি

পরীক্ষার পরে, এটি ক্রোমিয়ামে কাজ করে তবে এটি সর্বশেষতম ফায়ারফক্স সংস্করণে নেই ... জঘন্য ব্রাউজারের তুলনামূলক !!!

— hugsbrugs

Answer 11

এতে খুব সম্পূর্ণ সমাধান বেস রয়েছে:

`onchange="angular.element(this).scope().UpLoadFile(this.files)"`

এখানে একটি সমাধানের পরে ইনপুট ক্ষেত্রটি আড়াল করার এবং এটিকে একটি চিত্রের সাথে প্রতিস্থাপনের একটি সহজ উপায়, এটি কৌণিকর উপর একটি হ্যাকও প্রয়োজন তবে এটি কাজ করে [ট্রাইগ্রেভেন্ট প্রত্যাশার মতো কাজ করে না]

সমাধান:

• ইনপুট-ফিল্ডটি প্রদর্শনে রাখুন: কোনওটিই নয় [ইনপুট ফিল্ডটি ডিওএম-তে উপস্থিত রয়েছে তবে দৃশ্যমান নয়]
• আপনার চিত্রটি ঠিক পরে রাখুন চিত্রটিতে একটি পদ্ধতি সক্রিয় করতে এনবি-ক্লিক () ব্যবহার করুন

ছবিটি ক্লিক করা হলে ইনপুট ক্ষেত্রে একটি ডিওএম ক্রিয়া অনুকরণ করে 'ক্লিক করুন'। এট ভয়েইল!

 var tmpl = '<input type="file" id="{{name}}-filein"' + 
             'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
             ' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
             ' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
             '';
   // Image was clicked let's simulate an input (file) click
   scope.inputElem = elem.find('input'); // find input in directive
   scope.clicked = function () {
         console.log ('Image clicked');
         scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
    };

Comments

আপনি কৌনিক.এলিমেন্ট (এটি) .স্কোপ () ব্যবহার করতে পারবেন না, এটি একটি ডিবাগ বৈশিষ্ট্য!

— সিজার

Answer 12

আমি এটি এইভাবেই করেছি;

<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">    
<span  class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />

// self is the instance of $scope or this
self.upload = function () {
   var ctrl = angular.element("#txtUploadFile");
   ctrl.on('change', fileNameChanged);
   ctrl.click();
}

function fileNameChanged(e) {
    console.log(self.currentItem);
    alert("select file");
}

Answer 13

ফাইলের ইনপুট পরিবর্তনগুলি শোনার আর একটি আকর্ষণীয় উপায় হ'ল ইনপুট ফাইলের এনজি-মডেল বৈশিষ্ট্যের উপর নজর রাখা। অফ কোর্স ফাইলমোডেল একটি কাস্টম নির্দেশিকা।

এটার মত:

এইচটিএমএল -> <input type="file" file-model="change.fnEvidence">

জেএস কোড ->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

আশা করি এটি কাউকে সাহায্য করতে পারে।

Answer 14

কৌণিক উপাদান (যেমন কোনও নির্দেশকের মূল উপাদান) jQuery [লাইট] অবজেক্ট। এর অর্থ আমরা ইভেন্ট শ্রোতাদের এভাবে রেজিস্টার করতে পারি:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        // access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

এটি jQuery ইভেন্ট প্রতিনিধি। এখানে শ্রোতা নির্দেশের মূল উপাদানটির সাথে সংযুক্ত রয়েছে। ইভেন্টটি ট্রিগার করা হলে, এটি নিবন্ধিত উপাদানটির দিকে বুদবুদ হবে এবং jQuery নির্ধারণ করবে যে ইভেন্টটি সংজ্ঞায়িত নির্বাচকের সাথে মিলে এমন কোনও অভ্যন্তরীণ উপাদানের উপর উদ্ভূত কিনা। যদি এটি হয় তবে হ্যান্ডলারটি গুলি চালাবে।

এই পদ্ধতির সুবিধা হ'ল:

• হ্যান্ডলারটি $ উপাদানটির সাথে আবদ্ধ, যা নির্দেশের সুযোগটি নষ্ট হয়ে গেলে স্বয়ংক্রিয়ভাবে পরিষ্কার হয়ে যায়।
• টেমপ্লেটে কোনও কোড নেই
• এমনকি আপনি যদি ইভেন্ট হ্যান্ডলারের নিবন্ধকরণ করার সময় লক্ষ্য প্রতিনিধি (ইনপুট) এখনও রেন্ডার না করা হয়ে থাকে তখনও কাজ করবে (যেমন ব্যবহার করার সময় ng-ifবা ng-switch)

http://api.jquery.com/on/

Answer 15

আপনি অন্বেষণে কেবল নীচের কোডটি যুক্ত করতে পারেন এবং এটি পরিবর্তনটি সনাক্ত করবে। আপনি এক্স ক্লিক বা ফাইলের ডেটা সরানোর জন্য কোনও কিছুর উপরে একটি ফাংশন লিখতে পারেন ..

document.getElementById(id).value = "";

Comments

এটি খারাপ অনুশীলন এবং কৌনিক মত নয়।

— সেবাস্তিয়ান