কৌনিক ক্ষেত্রে কীভাবে উপাদানটিকে অ্যাক্সেস করতে হবে যা ইভেন্টটিকে ট্রিগার করেছিল?

Question 1

আমি আমার ওয়েব অ্যাপে বুটস্ট্র্যাপ এবং অ্যাঙ্গুলারজেএস উভয়ই ব্যবহার করি। দুজনকে এক সাথে কাজ করতে পেতে আমার কিছুটা সমস্যা হচ্ছে।

আমার একটি উপাদান রয়েছে, যার বৈশিষ্ট্য রয়েছে data-provide="typeahead"

<input id="searchText" ng-model="searchText" type="text"
       class="input-medium search-query" placeholder="title"
       data-provide="typeahead" ng-change="updateTypeahead()" />

এবং data-sourceব্যবহারকারী যখন ক্ষেত্রটি ইনপুট করে আমি বৈশিষ্ট্যটি আপডেট করতে চাই । ফাংশনটি updateTypeaheadসঠিকভাবে ট্রিগার করা হয়েছে, তবে ইভেন্টটি ট্রিগারকারী উপাদানগুলিতে আমার অ্যাক্সেস নেই, যতক্ষণ না আমি ব্যবহার করি না $('#searchText'), যা জিকুয়েরি উপায়, অ্যাঙ্গুলারজেএস উপায় নয়।

পুরানো স্টাইল জেএস মডিউলটির সাথে কাজ করার জন্য অ্যাংুলারজেএস পাওয়ার সর্বোত্তম উপায় কী।

Question 2

 updateTypeahead(this)

ফাংশনে DOM উপাদানটি পাস করবে না updateTypeahead(this)। এখানে thisসুযোগ উল্লেখ করা হবে। আপনি যদি DOM উপাদান ব্যবহার অ্যাক্সেস করতে চান updateTypeahead($event)। কলব্যাক ফাংশনে আপনি DOM উপাদানটি পেতে পারেন event.target।

দয়া করে নোট করুন: এনজি-চেঞ্জ ফাংশনটি $ ইভেন্টটি ভেরিয়েবল হিসাবে পাস করার অনুমতি দেয় না।

Question 3

কোনও ইভেন্টকে ট্রিগার করে এমন কোনও উপাদানের অ্যাক্সেস পাওয়ার সাধারণ কৌণিক উপায় হ'ল একটি নির্দেশনা লিখুন এবং কাঙ্ক্ষিত ইভেন্টের সাথে আবদ্ধ হন:

app.directive('myChange', function() {
  return function(scope, element) {
    element.bind('change', function() {
      alert('change on ' + element);
    });
  };
});

বা ডিডিও সহ (নীচে @ টিপার্টির মন্তব্য অনুসারে):

app.directive('myChange', function() {
  return { 
    link:  function link(scope, element) {
      element.bind('change', function() {
        alert('change on ' + element);
      });
    }
  }
});

উপরোক্ত নির্দেশাবলী নীচে ব্যবহার করা যেতে পারে:

<input id="searchText" ng-model="searchText" type="text" my-change>

Plunker ।

পাঠ্য ক্ষেত্রে টাইপ করুন, তারপরে / অস্পষ্ট রেখে দিন। পরিবর্তন কলব্যাক ফাংশন আগুন হবে। সেই কলব্যাক ফাংশনের অভ্যন্তরে আপনার অ্যাক্সেস রয়েছে element।

কিছু অন্তর্নির্মিত নির্দেশাবলী একটি ইভেন্ট ইভেন্টটি পাস করার পক্ষে সমর্থন করে। যেমন, এনজি- * ক্লিক করুন, এনজি-মাউস *। মনে রাখবেন যে এনজি-পরিবর্তন এই ইভেন্টটিকে সমর্থন করে না।

যদিও আপনি $ ইভেন্ট অবজেক্টের মাধ্যমে উপাদানটি পেতে পারেন:

<button ng-click="clickit($event)">Hello</button>

$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...

এই "গভীর কৌণিক পথ বিরুদ্ধে" যায় - Misko ।

Question 4

আপনি উপাদানটিতে প্রথম লেখার ইভেন্টের মতো সহজেই এটি পেতে পারেন

ng-focus="myfunction(this)"

এবং আপনার জেএস ফাইলটিতে নীচের মত

$scope.myfunction= function (msg, $event) {
    var el = event.target
    console.log(el);
}

আমি এটি ব্যবহার করেছি।

Question 5

আপনি যদি এই সমস্যার জন্য অন্য কোনও নির্দেশিকা তৈরি করতে না চান তবে নিয়ামকটিতে $ উপাদানটি ব্যবহার করে একটি সমাধান রয়েছে:

appControllers.controller('YourCtrl', ['$scope', '$timeout', '$element',
        function($scope, $timeout, $element) {

    $scope.updateTypeahead = function() {
       // ... some logic here
       $timeout(function() {
           $element[0].getElementsByClassName('search-query')[0].focus();
           // if you have unique id you can use $window instead of $element:
           // $window.document.getElementById('searchText').focus();
       });
    }
}]);

এবং এটি এনজি-চেঞ্জ নিয়ে কাজ করবে :

<input id="searchText" type="text" class="search-query" ng-change="updateTypeahead()" ng-model="searchText" />

Question 6

আপনি যদি এনজি-মডেল মানটি চান, যদি আপনি ট্রিগারযুক্ত ইভেন্টে এটি লিখতে পারেন:

Question 7

আপনার কোন সংস্করণ ছিল তা আমি নিশ্চিত নই, তবে এই প্রশ্নটি অনেক আগে থেকেই জিজ্ঞাসা করা হয়েছিল। বর্তমানে কৌনিক 1.5 এর সাথে আমি লড্যাশ থেকে ng-keypressইভেন্টটি ব্যবহার করতে পারি এবং অনুরূপ আচরণটি অনুকরণ করতে পারি, তাই আমি ইভেন্টটি ক্যাপচার করতে পারিdebounceng-change

<input type="text" ng-keypress="edit($event)" ng-model="myModel">

$ স্কোপ.এডিট = _.ডেবাউন্স (ফাংশন ($ ইভেন্ট) so কনসোল.লগ ("$ ইভেন্ট", $ ইভেন্ট) 800, 800)

Question 8

কৌণিক 5 এ উত্স উপাদানটি পাস করতে:

<input #myInput type="text" (change)="someFunction(myInput)">

স্নিপেট প্রসারিত করুন