নির্দেশিকা ব্যবহার করে অ্যাঙ্গুলারজেএস ব্রাউজারটি স্বতঃপূর্ণ কাজ করে

Question

অ্যাঙ্গুলারজেএস-তে একটি ফর্ম জমা দেওয়ার সময় এবং ব্রাউজারটি পাসওয়ার্ড কার্যকারিতা মনে রাখে এবং পরবর্তী লগইন প্রয়াসের মধ্যে আপনি ব্রাউজারটিকে ব্যবহারকারীর নাম এবং পাসওয়ার্ড দিয়ে লগইন ফর্মটি পূরণ করতে দেন, স্বয়ংক্রিয়র $scopeউপর ভিত্তি করে মডেলটি পরিবর্তন করা হবে না।

আমি খুঁজে পেয়েছি শুধুমাত্র নোংরা হ্যাক নিম্নলিখিত নির্দেশাবলী ব্যবহার:

app.directive("xsInputSync", ["$timeout" , function($timeout) {
    return {
        restrict : "A",
        require: "?ngModel",
        link : function(scope, element, attrs, ngModel) {
            $timeout(function() {
                if (ngModel.$viewValue && ngModel.$viewValue !== element.val()) {
                    scope.apply(function() {
                        ngModel.$setViewValue(element.val());
                    });
                }
                console.log(scope);
                console.log(ngModel.$name);
                console.log(scope[ngModel.$name]);
            }, 3000);
        }
    };
}]);

সমস্যাটি হ'ল ngModel.$setViewValue(element.val());মডেলটি পরিবর্তন হয় না এবং element.val()প্রত্যাবর্তিত মানের উপর ভিত্তি করে ভিউ হয় না। আমি কীভাবে এটি সম্পাদন করতে পারি?

Comments

এই কোডটি প্রথম ব্লাশে ঠিক আছে ... তবে বাকি (মার্কআপ ইত্যাদি) কোথায়? আমরা দেখতে পাচ্ছি এমন কোনও ফিজল বা নিমজ্জন আছে কি?

— বেন লেশ

প্লাঙ্কটি এখানে: plnkr.co/edit/CHrBAVU9Ycl2ex2DRr6R আমি নিশ্চিত নই যে এটি সরাসরি প্লাঙ্কারে কাজ করে কিনা কারণ এটি একটি আইফ্রেমে চলছে।

— lucassp

আপনার সুযোগ করার দরকার নেই $ কৌনিকটির $ সময়সীমার ভিতরে প্রয়োগ করুন। দেশীয় উইন্ডোতে আপনার প্রয়োজন হতে পারে.সেটটাইমআউট। তবে কৌনিকটি ব্যবহার করা আরও ভাল ধারণা।

— গর্প্যাক্রেট

এই সমস্যার জন্য কৌণিক দেব tbosch থেকে একটি "অফিসিয়াল" পলফিল ফিক্স রয়েছে । দয়া করে নীচে উত্তর stackoverflow.com/a/25687396/3009639 এ বিশদটি দেখুন।

— orszaczky

দুর্ভাগ্যক্রমে "অফিসিয়াল" ফিক্সটি পরিত্যক্ত এবং অনেক ব্রাউজারে কাজ করে না। ইস্যুগুলি দায়ের করা হয়েছে তবে সেগুলির সমাধান করা হয়নি তাই অনুসন্ধান অব্যাহত রয়েছে ...

— সাইবারওম্ব্যাট

Answer 1

স্পষ্টতই এটি কৌনিক সংক্রান্ত একটি পরিচিত সমস্যা এবং এটি বর্তমানে উন্মুক্ত

আপনি চেষ্টা করছেন এমন কিছু কাজ ছাড়া আপনি এখানে কী করতে পারবেন তা আমি নিশ্চিত নই। দেখে মনে হচ্ছে আপনি সঠিক পথে আছেন আমি আপনার ব্রঙ্কের জন্য একটি পাসওয়ার্ড মনে রাখার চেষ্টা করার জন্য আমার ব্রাউজারটি পেতে পারি না, সুতরাং আমি নিশ্চিত না যে এটি কাজ করবে কিনা তবে একবার দেখুন:

app.directive('autoFillSync', function($timeout) {
   return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ngModel) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(ngModel.$pristine && origVal !== newVal) {
                  ngModel.$setViewValue(newVal);
              }
          }, 500);
      }
   }
});

<form name="myForm" ng-submit="login()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
   <button type="submit">Login</button>
</form>

আমার মনে হয় আপনার কিছুটা সহজ করার জন্য আপনার প্রয়োজন need আমি অবশ্যই একটি জিনিস যা সুপারিশ করি তা হ'ল চেক করুন ngModel.$pristineএবং নিশ্চিত করুন যে আপনি কিছু দুর্বল ব্যবহারকারীর ইনপুট ওভাররাইট করছেন না। এছাড়াও, 3 সেকেন্ড সম্ভবত খুব দীর্ঘ। আপনাকে একটি $ টাইমআউট, বিটিডাব্লুতে $ প্রয়োগ () কল করতে হবে না, এটি স্বয়ংক্রিয়ভাবে আপনার জন্য একটি $ ডাইজেস্ট সারি করা উচিত।

আসল ধরা: আপনার ব্রাউজারটি কৌতুককে মৃত্যুদন্ড কার্যকর করবে? আমার ব্রাউজার সম্পর্কে কি?

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

Comments

Ist আদিম সম্পর্কে ভাল পয়েন্ট। ঠিক আছে, 3 সেকেন্ড রয়েছে কেবল পরীক্ষার উদ্দেশ্যে। "পাসওয়ার্ড সংরক্ষণ করুন" ডায়ালগটি সাফারিটিতে কাজ করছে বলে মনে হচ্ছে। এটি অন্য একটি বিষয় যা আমাকে তদন্ত করতে হবে।

— লুকাস্প

লোকাল স্টোরেজ দিয়ে কেবল তাকে বোকা বানান। :) ... আমি এটা নিয়ে ভাবতে থাকব তবে যে কোনও দ্বিমুখী বাইন্ডিংয়ের সাথে অটোফিল কাজ করার সম্ভাব্যতা সম্পর্কে আমার সন্দেহ আছে।

— বেন লেশ

হ্যাঁ, তবে মডেলটির কাজ করার দিকনির্দেশ থেকে আমি এখনও আপডেট করতে সক্ষম হব।

— lucassp

আমি লোকাল স্টোরেজ সম্পর্কে মজা করছিলাম, আপনি সেখানে পাসওয়ার্ড রাখতে চাইবেন না।

— বেন লেশ

এটি সাফারি এবং ক্রেডিট কার্ড অটোফিলের সাথে কাজ করবে না, কারণ এই অটোফিলটি যে কোনও সময় ব্যবহারকারীর দ্বারা ট্রিগার করা হয়েছে

— ডালাস ক্লার্ক

Answer 2

এখানে একটি সমাধান উপস্থাপিত অন্যান্য সমাধানের তুলনায় অনেক কম হল hacky এবং শব্দার্থগতভাবে শব্দ AngularJS নন: http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/

myApp.directive('formAutofillFix', function() {
  return function(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputs
    if(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').submit(function(e) {
          e.preventDefault();
          elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

তারপরে আপনি কেবল নিজের ফর্মের সাথে নির্দেশটি সংযুক্ত করুন:

<form ng-submit="submitLoginForm()" form-autofill-fix>
  <div>
    <input type="email" ng-model="email" ng-required />
    <input type="password" ng-model="password" ng-required />
    <button type="submit">Log In</button>
  </div>
</form>

Comments

এই এক কাজ। আমরা উপরের বেশিরভাগ চেষ্টা করেছিলাম কোনও ফল ছাড়াই। ধন্যবাদ !!! ফলাফলটি মোবব্র ডটকম

— প্যাট্রিক সাভালে

যেহেতু এটি jQuery ব্যবহার করে, jQuery ব্যতীত এটি কাজ করার আশা করা যায় না।

— কুইন স্ট্রহল

এখানে আমরা 2018 এ আছি এবং এটি এখনও ঠিক। ধন্যবাদ এজেকিয়েল!

— স্কট ম্যানি

Answer 3

আপনাকে $timeoutএই জাতীয় কিছু বা ব্যবহার করতে হবে না । আপনি একটি ইভেন্ট সিস্টেম ব্যবহার করতে পারেন।

আমি মনে করি এটি আরও Angularish এবং jQuery বা কাস্টম ইভেন্ট ক্যাচিংয়ের উপর নির্ভর করে না।

আপনার জমা হ্যান্ডলারের উদাহরণস্বরূপ:

$scope.doLogin = function() {
    $scope.$broadcast("autofill:update");

    // Continue with the login.....
};

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

.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    }
});

শেষ অবধি, আপনার এইচটিএমএল এর মত হবে:

<input type="text" name="username" ng-model="user.id" autofill="autofill"/>

Comments

ইনপুট খালি থাকাকালীন আমার ক্ষেত্রে সাবমিট বাটনটি অক্ষম করা আছে।

— গর্প্যাক্রেট

এটি async হিসাবে আপনার কি কখনও সমস্যা হয় না? ইভেন্টটির পুনরাবৃত্তি হওয়ার আগেই নির্দেশিকায় সুযোগটি আপডেট করার আগে সার্ভারে লগইন কলটি ইতিমধ্যে ছেড়ে গেছে?

— স্যান্ডার

Answer 4

আর হ্যাক করার দরকার নেই! কৌণিক দেব tbosch একটি পলিফিল তৈরি করেছে যা একটি পরিবর্তন ইভেন্টকে ট্রিগার করে যখন ব্রাউজার কোনও পরিবর্তন ইভেন্টকে ট্রিগার না করে ক্ষেত্রগুলি পরিবর্তন করে:

https://github.com/tbosch/autofill-event

আপাতত তারা এঙ্গুলার কোডে এটি তৈরি করবে না, কারণ এটি ব্রাউজারের জন্য একটি বাগফিক্স এবং কৌণিক ছাড়াও কাজ করে (যেমন প্লেইন jQuery অ্যাপ্লিকেশনগুলির জন্য)।

"পলিফিল ডকুমেন্ট লোডের পরিবর্তনের জন্য এবং কোনও ইনপুট রেখে গেলে (কেবল একই ফর্মটিতে) পরীক্ষা করে দেখবে However তবে, আপনি চাইলে নিজেই এই চেকটি ট্রিগার করতে পারেন।

প্রকল্পটির ইউনিট টেস্টের পাশাপাশি আধা স্বয়ংক্রিয় পরীক্ষাগুলি রয়েছে, তাই শেষ পর্যন্ত প্রয়োজনীয় ব্রাউজার সেটিংসের সাথে সমস্ত বিভিন্ন ব্যবহারের কেস সংগ্রহ করার জন্য আমাদের কাছে একটি জায়গা রয়েছে।

দয়া করে নোট করুন: এই পলিফিলটি অ্যাংুলারজেএস / জিকুয়েরি অ্যাপ্লিকেশনগুলির সাথে পাশাপাশি অ্যাংুলার ব্যবহার না করে এমন সরল জিকুয়েরি অ্যাপ্লিকেশনগুলির সাথে প্লেইন অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশনগুলির সাথে কাজ করে ""

এটি এর সাথে ইনস্টল করা যেতে পারে:

bower install autofill-event --save

আপনার পৃষ্ঠায় jQuery বা কৌনিক autofill-event.js পরে স্ক্রিপ্ট যুক্ত করুন ।

এটি নিম্নলিখিতগুলি করবে:

• ডোমকন্টেন্টলয়েডের পরে: সমস্ত ইনপুট ক্ষেত্র পরীক্ষা করুন
• একটি ক্ষেত্র বাকি আছে: একই ফর্মের অন্যান্য সমস্ত ক্ষেত্র পরীক্ষা করুন

এপিআই (ম্যানুয়ালি চেকটি ট্রিগার করতে):

• $el.checkAndTriggerAutoFillEvent(): প্রদত্ত jQuery / jQLite উপাদানের সমস্ত DOM উপাদানগুলির জন্য চেকটি কার্যকর করুন।

কিভাবে এটা কাজ করে

1. ব্যবহারকারীর দ্বারা ইনপুট উপাদানগুলিতে সমস্ত পরিবর্তন (পরিবর্তন ইভেন্টের জন্য শোনার) এবং জাভাস্ক্রিপ্ট দ্বারা (jQuery / jQLite উপাদানগুলির জন্য। El.val () বাধা দিয়ে) মনে রাখবেন। পরিবর্তিত মানটি একটি ব্যক্তিগত সম্পত্তির উপাদানটিতে সংরক্ষণ করা হয়।

2. স্বয়ংক্রিয় ভরাটের জন্য একটি উপাদান চেক করা: উপাদানটির বর্তমান মানকে মনে রাখা মানের সাথে তুলনা করুন। যদি এটি আলাদা হয় তবে পরিবর্তন ইভেন্টটি ট্রিগার করুন।

নির্ভরতা

AngularJS বা jQuery (এক বা উভয়ের সাথে কাজ করে)

গিথুব পৃষ্ঠায় আরও তথ্য এবং উত্স ।

গিথুবের মূল কৌণিক সংখ্যা # 1460 এখানে পড়তে পারেন।

Comments

এটি আমার ক্ষেত্রে কাজ করে না। চেকএন্ডটিগ্রিজআউটফিলইভেন্ট () ট্রিগারড এবং ইভেন্টগুলি উত্পন্ন করে, তবে অ্যাঙ্গুলারজেএস কখনও তার মডেলগুলি আপডেট করে না এবং মনে করে যে ক্ষেত্রগুলি খালি।

— স্প্লাক্টার

এই পলিলটি ব্যবহার করতে আমার কোনও সমস্যা হয়নি। আপনি যদি এটি সঠিকভাবে কাজ করতে না পান তবে আপনার কিছু কোড সহ একটি পৃথক প্রশ্ন তৈরি করা উচিত। যদি আপনি কোনও বাগ খুঁজে পান তবে আপনার গিথুব টিকিটগুলি পরীক্ষা করা উচিত, বা একটি নতুন খোলার উচিত।

— orszaczky

হ্যাঁ, আমি মনে করি এটি এই বাগের সাথে সম্পর্কিত: github.com/tbosch/autofill-event/issues/11

— স্প্লাক্টর

ngModelOptionsআপনার মডেলটি সঠিকভাবে সিঙ্ক হয়েছে তা নিশ্চিত করার জন্য autofill-eventআপনি এখন ইভেন্টগুলির changeএকটি হিসাবে নির্দিষ্ট করতে পারবেন with updateOn

— morloch

Answer 5

নোংরা কোড, এই কোডটি ব্যবহারের আগে https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 ইস্যু করা হয়েছে কিনা তা পরীক্ষা করুন । ক্ষেত্রটি পূর্ণ হওয়ার আগে এই নির্দেশিকাটি ইভেন্টগুলিকে ট্রিগার করে, কেবল জমা দেওয়ার আগে নয় (জমা দেওয়ার আগে যদি আপনাকে ইনপুট হ্যান্ডেল করতে হয় তবে এটি প্রয়োজনীয়)

 .directive('autoFillableField', function() {
    return {
                   restrict: "A",
                   require: "?ngModel",
                   link: function(scope, element, attrs, ngModel) {
                       setInterval(function() {
                           var prev_val = '';
                           if (!angular.isUndefined(attrs.xAutoFillPrevVal)) {
                               prev_val = attrs.xAutoFillPrevVal;
                           }
                           if (element.val()!=prev_val) {
                               if (!angular.isUndefined(ngModel)) {
                                   if (!(element.val()=='' && ngModel.$pristine)) {
                                       attrs.xAutoFillPrevVal = element.val();
                                       scope.$apply(function() {
                                           ngModel.$setViewValue(element.val());
                                       });
                                   }
                               }
                               else {
                                   element.trigger('input');
                                   element.trigger('change');
                                   element.trigger('keyup');
                                   attrs.xAutoFillPrevVal = element.val();
                               }
                           }
                       }, 300);
                   }
               };
});

Answer 6

সুস্পষ্ট সোজা সামনের সমাধান মত মনে হচ্ছে। কোন jQuery প্রয়োজন।

হালনাগাদ:

• মডেলটি তখনই আপডেট হয় যখন মডেল মানটি প্রকৃত ইনপুট মানের সমান হয় না।
• প্রথম অটোফিল চেক করা বন্ধ হয় না। যদি আপনি উদাহরণস্বরূপ অন্য কোনও অ্যাকাউন্ট ব্যবহার করতে চান।

---

app.directive('autofillable', ['$timeout', function ($timeout) {
    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            scope.check = function(){
                var val = elem[0].value;
                if(ctrl.$viewValue !== val){
                    ctrl.$setViewValue(val)
                }
                $timeout(scope.check, 300);
            };
            scope.check();
        }
    }
}]);

Comments

+1 ভাল সমাধান, যা আমি এসেছি তার অনুরূপ। আমি কেবল যুক্ত করার পরামর্শ দেব হ'ল প্রথমে মডেলটি $pristineপরিবর্তন করার আগে তা পরীক্ষা করা উচিত এবং তারপরে পরিবর্তন করার পরে এটি স্থিত রাখা উচিত $pristine। অন্যথায় আপনি দেখতে পাবেন যে কোনও ফর্মটি যদি কোনও অটোফিল ডেটা লোড হয় তবে উপরের নির্দেশিকাটি এখনও মডেলটিকে আপডেট করবে এবং পরবর্তীকালে এটি তৈরি করবে dirtyযদিও ফর্ম নিয়ন্ত্রণটিকে এখনও অচ্ছুত বিবেচনা করা উচিত। উদাহরণস্বরূপ, আপনার নির্দেশিকা ব্যবহার করে। আমি কোডটি এতে যুক্ত করব বলে মন্তব্য করেছি: jsfiddle.net/OACDesigns/L8Sja/4

— OACDesigns

এছাড়াও, আমি মনে করি scope:trueহওয়া উচিতscope:{}

— OACDesigns

Answer 7

সমাধান 1 [টাইমআউট ব্যবহার করে]:

নির্দেশিকা:

app.directive('autoFillSync', function($timeout) {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, model) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(model.$pristine && origVal !== newVal) {
                  model.$setViewValue(newVal);
              }
          }, 500);
      }
    };
});

এইচটিএমএল:

<form name="myForm" ng-submit="login()">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
  <button type="submit">Login</button>
</form>

সমাধান 2 [কৌণিক ঘটনাগুলি ব্যবহার করে]:

রেফ: উত্তর বেকো এর উত্তর

নির্দেশিকা:

app.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    };
});

এইচটিএমএল:

<form name="myForm" ng-submit="login()">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" ng-model="username" autofill/><br/>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" ng-model="password" autofill/><br/>
  <button type="submit">Login</button>
</form>

সমাধান 3 [রিলে পদ্ধতি কলগুলি ব্যবহার করে]:

নির্দেশিকা:

app.directive('autoFill', function() {
    return {
        restrict: 'A',
        link: function(scope,element) {
            scope.submit = function(){
                scope.username = element.find("#username").val();
                scope.password = element.find("#password").val();
                scope.login();//call a login method in your controller or write the code here itself
            }

        }
    };
});

এইচটিএমএল:

<form name="myForm" auto-fill ng-submit="submit()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" />
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" />
   <button type="submit">Login</button>
</form>

Comments

সমাধান 1 সময়ের জন্য খুব ভাল কাজ করেছে, তবে এখন কৌণিক 1.4.9 এ এটি আর কাজ করে না। model.$validনির্দেশিকাতে পরীক্ষা করা আগে এবং পরে উভয়ই সত্য প্রত্যাবর্তন করে $setViewValueতবে উপাদানটি এখনও ng-invalidশ্রেণীর সাথে রয়েছে

— জন

Answer 8

ঠিক আছে, ব্রাউজারের আচরণ অনুকরণ করার সবচেয়ে সহজ উপায়, সুতরাং যদি পরিবর্তনের ইভেন্টে কোনও সমস্যা হয় তবে কেবল নিজেকে তাড়িয়ে দিন। অনেক সহজ।

নির্দেশিকা:

yourModule.directive('triggerChange', function($sniffer) {
    return {
        link : function(scope, elem, attrs) {
            elem.on('click', function(){
                $(attrs.triggerChange).trigger(
                    $sniffer.hasEvent('input') ? 'input' : 'change'
                );
            });
        },
        priority : 1
    }
});

এইচটিএমএল:

<form >
    <input data-ng-model="user.nome" type="text" id="username">

    <input data-ng-model="user.senha" type="password" id="password" >

    <input type="submit" data-ng-click="login.connect()" id="btnlogin" 
           data-trigger-change="#password,#username"/>
</form>

আপনি কিছু প্রকারভেদ করতে পারেন, যেমন ফর্মটিতে নির্দেশিকা রেখে ফর্ম জমা দেওয়ার জন্য .dirty শ্রেণীর সাথে সমস্ত ইনপুটগুলিতে ইভেন্টটি ফায়ার করা।

Answer 9

এটি jQuery উপায়:

$(window).load(function() {
   // updates autofilled fields
   window.setTimeout(function() {
     $('input[ng-model]').trigger('input');
   }, 100);
 });

এটি কৌণিক উপায়:

 app.directive('autofill', ['$timeout', function ($timeout) {
    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            $timeout(function(){
                $(elem[0]).trigger('input');
                // elem.trigger('input'); try this if above don't work
            }, 200)
        }
    }
}]);

এইচটিএমএল

<input type="number" autofill /> 

Comments

সম্পূর্ণ অ-কৌণিক উপায়।

— গর্প্যাক্রেট

@ গোরপ্যাক্রেট: এখন এটি কৌণিক উপায়ে পরীক্ষা করে দেখুন।

— নিশ্চীত ধনানী

অ্যাঙ্গুলার ওয়ে এর ট্যাবগুলির অনেকগুলি স্পেস রয়েছে। শুধু কিদিন আমি অনুভূমিক স্ক্রোলিং পছন্দ করি।

— ড্যানিয়েল বিরোস্কি পপেস্কি

উপাদানটিতে কোনও ফাংশন ট্রিগার না থাকায় এটি কৌণিকভাবে কাজ করে না। আমি মনে করি এটির jquery অন্তর্ভুক্ত করা প্রয়োজন

— টমাস

triggerHandler('input')আপনার যদি পুরো

— বিকাশযুক্ত জেকোয়ারি

Answer 10

এখানে আরও কার্যকর যা কম হ্যাকি, তবে নিয়ামকটিতে কিছু অতিরিক্ত কোডের প্রয়োজন।

এইচটিএমএল:

<form ng-submit="submitForm()" ng-controller="FormController">
    <input type="text" ng-model="username" autocomplete-username>
    <input type="submit">
</form>

নির্দেশিকা (কফিস্ক্রিপ্ট):

directives.directive 'autocompleteUsername', ->
    return (scope, element) ->
        scope.getUsername = ->
            element.val()

নিয়ন্ত্রক:

controllers.controller 'FormController', [->
    $scope.submitForm = ->
        username = $scope.getUsername?() ? $scope.username
        # HTTP stuff...
]

Comments

আপনি ভ্যানিলা জাভাস্ক্রিপ্ট এ আছে?

— f1lt3r

: CoffeeScript.org একজন অনুবাদক উপলব্ধ এখানে সম্পন্ন

— Jab

Answer 11

এটিই একমাত্র সমাধান যা আমি খুঁজে পেয়েছি যা আমার সমস্ত কৌণিক 'বৈধতাগুলিকে জমা বাটনটি অক্ষম / সক্ষম সহ নকশা অনুযায়ী কাজ করতে দিয়েছে। বোর এবং 1 স্ক্রিপ্ট ট্যাগ সহ ইনস্টল করে। Bazinga!

https://github.com/tbosch/autofill-event

Comments

এই পলি ফিলটি ফর্মের স্থিতিতে জমা বাটন / ইনপুট বাইন্ডিংয়ের সাথে খাপ খায় না। আপনি ডাইজেস্টকে ট্রিগার করতে চাইলে আপনি পৃষ্ঠায় ক্লিক না করা (ব্রাউজারটি কিছু বাস্তব ফিলিং করতে এ্যাকশনটিকে ট্রিগার হিসাবে মনে করে), তবে বোতামটি সক্ষম হয়ে যায়। ম্যানুয়াল টেস্ট সহ পরীক্ষার পৃষ্ঠা

— ই-মেঘ

Answer 12

একটি টাইমআউট ফাংশনটি ব্যবহার না করে মডেলটির মান পরিবর্তন করা আমার পক্ষে কাজ করেছিল।

আমার কোডটি এখানে:

module.directive('autoFill', [ function() {
    return {
        require: 'ngModel',
        link:function(scope, element, attr, ngModel) {
            var origVal = element.val();
            if(origVal){
                ngModel.$modelValue = ngModel.$modelValue || origVal;
            }
        }
    };
}]);

Answer 13

জমা হ্যান্ডলারের এক-লাইনার কাজ (jQuery প্রয়োজন):

if (!$scope.model) $scope.model = $('#input_field').val();

Comments

এটি যদি কোনও নির্দেশিকাতে থাকে তবে এটি অবশ্যই একটি ওয়ানলাইনার নয়, এটি অবশ্যই হওয়া উচিত।

— ইশারউড

Answer 14

আমি জমা দেওয়ার জন্য একটি $ setValue (ভাল ()) জোর করি: ( এটি jQuery ছাড়াই কাজ করে )

   var ValidSubmit = ['$parse', function ($parse) {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, element, iAttrs, controller) {
                    var form = element.controller('form');
                    form.$submitted = false;
                    var fn = $parse(iAttrs.validSubmit);
                    element.on('submit', function(event) {
                        scope.$apply(function() {
                            var inputs = element.find('input');
                            for(var i=0; i < inputs.length; i++) {
                                var ele = inputs.eq(i);
                                var field = form[inputs[i].name];
                                field.$setViewValue(ele.val());
                            }
                            element.addClass('ng-submitted');
                            form.$submitted = true;
                            if(form.$valid) {
                                fn(scope, {$event:event});
                            }
                        });
                    });
                    scope.$watch(function() { return form.$valid}, function(isValid) {
                        if(form.$submitted == false) return;
                        if(isValid) {
                            element.removeClass('has-error').addClass('has-success');
                        } else {
                            element.removeClass('has-success');
                            element.addClass('has-error');
                        }
                    });
                }
            }
        }
    }
}]
app.directive('validSubmit', ValidSubmit);

Answer 15

আমি Angularjs তে খুব নতুন, তবে আমি সেই সমস্যার একটি সহজ সমাধান পেয়েছি => কৌতুকটি এক্সপ্রেশনকে পুনরায় মূল্যায়ন করতে বাধ্য করুন ... এটিকে পরিবর্তন করে! (অবশ্যই প্রাথমিক অবস্থায় ফিরে যেতে আপনার প্রাথমিক মানটি মনে রাখা দরকার) ফর্মটি জমা দেওয়ার জন্য এটি আপনার নিয়ামক কার্যক্রমে যেভাবে চলেছে:

    $scope.submit = function () {
                var oldpassword = $scope.password;
                $scope.password = '';
                $scope.password = oldpassword;
//rest of your code of the submit function goes here...

অবশ্যই, আপনার পাসওয়ার্ড ইনপুটটিতে প্রবেশ করা মানটি উইন্ডো দ্বারা সেট করা হয়েছে এবং ব্যবহারকারীর দ্বারা নয়।

Answer 16

আপনি এই কোড চেষ্টা করতে পারেন:

yourapp.directive('autofill',function () {

    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var origVal = elem.val();
            if (origVal != '') {
                elem.trigger('input');
            }
        }
    }
});

Answer 17

এই উত্তরের একটি সামান্য পরিবর্তন ( https://stackoverflow.com/a/14966711/3443828 ): a টাইমআউটের পরিবর্তে একটি $ বিরতি ব্যবহার করুন যাতে আপনার ব্রাউজারটি রেস করতে না হয়।

mod.directive('autoFillSync', function($interval) {
    function link(scope, element, attrs, ngModel) {
        var origVal = element.val();
        var refresh = $interval(function() {
          if (!ngModel.$pristine) {
            $interval.cancel(refresh);
          }else{
            var newVal = element.val();
            if (origVal !== newVal) {
              ngModel.$setViewValue(newVal);
              $interval.cancel(refresh);
            }
          }
        }, 100);
    }

    return {
      require: 'ngModel',
      link: link
    }
  });

Answer 18

এই সমাধানটি আমি আমার ফর্মগুলি ব্যবহার করে শেষ করেছি।

.directive('autofillSync', [ function(){
  var link = function(scope, element, attrs, ngFormCtrl){
    element.on('submit', function(event){
      if(ngFormCtrl.$dirty){
        console.log('returning as form is dirty');
        return;
      }   
      element.find('input').each(function(index, input){
        angular.element(input).trigger('input');
      }); 
    }); 
  };  
  return {
    /* negative priority to make this post link function run first */
    priority:-1,
    link: link,
    require: 'form'
  };  
}]);

এবং ফর্মের টেমপ্লেট হবে

<form autofill-sync name="user.loginForm" class="login-form" novalidate ng-submit="signIn()">
    <!-- Input fields here -->
</form>

এইভাবে আমি আমার এনজি-মডেলটিতে থাকা কোনও পার্সার / ফর্ম্যাটর চালাতে সক্ষম হয়েছি এবং জমা দেওয়ার কার্যকারিতাটি স্বচ্ছ করতে পেরেছি।

Answer 19

নির্দেশ ছাড়াই সমাধান:

.run(["$window", "$rootElement", "$timeout", function($window, $rootElement, $timeout){

        var event =$window.document.createEvent("HTMLEvents");
        event.initEvent("change", true, true);

        $timeout(function(){

            Array.apply(null, $rootElement.find("input")).forEach(function(item){
                if (item.value.length) {
                    item.$$currentValue = item.value;
                    item.dispatchEvent(event);
                }
            });

        }, 500);
    }])

Answer 20

এটি একটি সাধারণ ফিক্স যা ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই পরীক্ষিত সমস্ত মামলার জন্য কাজ করে। নোট করুন যে শীর্ষ উত্তরের সাথে (ডাইরেক্টিভ ডাব্লু / সময়সীমা) আমার সমস্যা ছিল -

• ব্রাউজারটি পিছনে / ফরোয়ার্ড বোতামগুলি, পৃষ্ঠা লোড ইভেন্টগুলিকে পুনরায় ফায়ার করবেন না (যাতে ফিক্সটি প্রযোজ্য না)
• পৃষ্ঠা লোডের কিছু সময় পরে শংসাপত্রগুলি লোড হচ্ছে। যেমন ফায়ারফক্সে, লগইন বাক্সে ডাবল ক্লিক করুন এবং সঞ্চিত শংসাপত্রগুলি থেকে নির্বাচন করুন।
• বৈধ ইনপুট সরবরাহ না করা পর্যন্ত আমি লগইন বোতামটি অক্ষম করার পরে ফর্ম জমা দেওয়ার আগে আপডেট হওয়া এমন একটি সমাধানের প্রয়োজন

এই ফিক্সটি স্পষ্টতই খুব বোবা এবং হ্যাকি, তবে এটি সময়ের 100% কাজ করে -

function myScope($scope, $timeout) {
    // ...
    (function autoFillFix() {
        $timeout(function() { 
            $('#username').trigger('change'); 
            $('#password').trigger('change'); 
            autoFillFix(); }, 500);                    
    })();
}

Comments

প্রতিস্থাপন করতে পারে $timeoutসঙ্গে $intervalভবিষ্যতে একটি বিট আরো প্রসঙ্গ devs এবং অদ্ভুত খুঁজছেন recursive কল সেখানে চলছে পরিত্রাণ পেতে দিতে

— Mutmatt

Answer 21

এই সমাধানগুলির কোনওটিই আমার ব্যবহারের ক্ষেত্রে ব্যবহার করে না। আমার কিছু ফর্ম ক্ষেত্র রয়েছে যা পরিবর্তনের জন্য দেখার জন্য এনজি-চেঞ্জ ব্যবহার করে। ব্যবহার$watchঅটোফিল দ্বারা ট্রিগার না হওয়ার কারণে করা কোনও সহায়তা নয়। যেহেতু আমার কাছে সাবমিট বাটন নেই তাই সমাধানগুলির কয়েকটি চালনার সহজ উপায় নেই এবং আমি অন্তরগুলি ব্যবহার করে সফল হই নি।

আমি অটোফিল অক্ষম করেছিলাম - আদর্শ নয় তবে ব্যবহারকারীর কাছে অনেক কম বিভ্রান্তিকর।

<input readonly onfocus="this.removeAttribute('readonly');">

উত্তরটি এখানে পেয়েছি

Answer 22

আপনি যদি jQuery ব্যবহার করেন তবে আপনি ফর্ম জমা দেওয়ার ক্ষেত্রে এটি করতে পারেন:

এইচটিএমএল:

<form ng-submit="submit()">
    <input id="email" ng-model="password" required 
           type="text" placeholder="Your email">
    <input id="password" ng-model="password" required 
           type="password" placeholder="Password">
</form>

জাতীয়:

 $scope.submit = function() {
     $scope.password = $('#password').val();
}

Comments

যদিও এটি কাজ করতে পারে এটি আরও জটিল ফর্মগুলির জন্য যুক্তিসঙ্গত নয়।

— original1tech

Answer 23

আপনি যদি এটি সহজ রাখতে চান তবে জাভাস্ক্রিপ্ট ব্যবহার করে মানটি পান

আপনার কৌণিক জেএস নিয়ামকটিতে:

var ব্যবহারকারীর নাম = ডকুমেন্ট.জেটলেটমেন্টবাইআইডি ('ব্যবহারকারীর নাম') value মান;

Comments

আমি মনে করি সমস্যাটি কী তা আপনি বুঝতে পারবেন না

— আয়নর