কৌণিক উপায়ে উপাদান ফোকাস সেট করুন

Question

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

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

মূলত, আমি একটি নির্দেশিকা তৈরি করি যা ব্যবহারকারী দ্বারা নির্দেশকের সাথে সংজ্ঞায়িত স্কোপ মান বা ডিফল্টর ফোকাসএলিমেন্ট দেখে থাকে এবং যখন সেই মানটি উপাদানটির আইডির সমান হয় তখন সেই উপাদানটি নিজেই ফোকাস করে।

angular.module('appnamehere')
  .directive('myFocus', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        if (attrs.myFocus == "") {
          attrs.myFocus = "focusElement";
        }
        scope.$watch(attrs.myFocus, function(value) {
          if(value == attrs.id) {
            element[0].focus();
          }
        });
        element.on("blur", function() {
          scope[attrs.myFocus] = "";
          scope.$apply();
        })        
      }
    };
  });

কোনও ইনপুট যা কোনও কারণে ফোকাস পেতে প্রয়োজন, এইভাবে করবে

<input my-focus id="input1" type="text" />

ফোকাস সেট করার জন্য এখানে কোনও উপাদান:

<a href="" ng-click="clickButton()" >Set focus</a>

এবং উদাহরণ ফাংশন যে ফোকাস সেট:

$scope.clickButton = function() {
    $scope.focusElement = "input1";
}

এটি কৌণিক ক্ষেত্রে একটি ভাল সমাধান? এর কি এমন সমস্যা আছে যা আমার খারাপ অভিজ্ঞতার সাথে আমি এখনও দেখি না?

Answer 1

আপনার সমাধান সঙ্গে সমস্যা এটি ভাল যখন অন্য নির্দেশনা যে একটি নতুন সুযোগ সৃষ্টি করে, যেমন নিচে বাঁধা কাজ করে না ng-repeat। আরও ভাল সমাধান হ'ল কেবল এমন একটি পরিষেবা ফাংশন তৈরি করা যা আপনাকে আপনার নিয়ন্ত্রণকারীদের মধ্যে উপাদানকে জরুরীভাবে ফোকাস করতে সক্ষম করে বা এইচটিএমএলে ঘোষণামূলকভাবে উপাদানগুলিকে ফোকাস করতে সক্ষম করে।

ডেমো

অবশ্যই JAVASCRIPT

সেবা

 .factory('focus', function($timeout, $window) {
    return function(id) {
      // timeout makes sure that it is invoked after any other event has been triggered.
      // e.g. click events that need to run before the focus or
      // inputs elements that are in a disabled state but are enabled when those events
      // are triggered.
      $timeout(function() {
        var element = $window.document.getElementById(id);
        if(element)
          element.focus();
      });
    };
  });

নির্দেশিকা

  .directive('eventFocus', function(focus) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        focus(attr.eventFocusId);
      });

      // Removes bound events in the element itself
      // when the scope is destroyed
      scope.$on('$destroy', function() {
        elem.off(attr.eventFocus);
      });
    };
  });

নিয়ামক

.controller('Ctrl', function($scope, focus) {
    $scope.doSomething = function() {
      // do something awesome
      focus('email');
    };
  });

এইচটিএমএল

<input type="email" id="email" class="form-control">
<button event-focus="click" event-focus-id="email">Declarative Focus</button>
<button ng-click="doSomething()">Imperative Focus</button>

Comments

আমি এই সমাধানটি সত্যিই পছন্দ করি। আপনি কি আরও ব্যাখ্যা করতে পারেন $ টাইমআউটটি আরও কিছুটা ব্যবহার করার কারণ? আপনি কোনও "কৌণিক জিনিস" বা "ডোম থিং" এর কারণে এটি ব্যবহার করার কারণটি কি?

— ব্যবহারকারী 1821052

এটি নিশ্চিত করে যে এটি কৌনিকীয় যে কোনও ডাইজেস্ট চক্রের পরে চলে, কিন্তু এটি ডাইজেস্ট চক্রকে বাদ দেয় না যে একটি অ্যাসিনক্রোনাস ক্রিয়াকলাপের পরে প্রভাবিত হয় যা সময়সীমা শেষে কার্যকর করা হয়।

— রাইবলার

ধন্যবাদ! কৌনিক

— ডক্সে

@ রিয়েবলার, ধন্যবাদ! দুর্দান্ত সহজ সমাধান। যদিও শুধু একটি প্রশ্ন। আমি কি কোনও ঘটনা ঘটে যাওয়ার অপেক্ষা অপেক্ষা অ্যাট্রিবিউটর মাধ্যমে তৈরি কারখানাটি ব্যবহার করতে পারি?

— প্রতীক গায়কওয়াদ

কেবল কোনও ইনপুটকে ফোকাস করার জন্য কৌণিকভাবে প্রয়োজনীয় পরিমাণের কাজ এটি উন্মাদ।

— ব্রুনো সান্টোস

Answer 2

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

নমুনা কোড নির্দেশনা:

gbndirectives.directive('focusOnCondition', ['$timeout',
    function ($timeout) {
        var checkDirectivePrerequisites = function (attrs) {
          if (!attrs.focusOnCondition && attrs.focusOnCondition != "") {
                throw "FocusOnCondition missing attribute to evaluate";
          }
        }

        return {            
            restrict: "A",
            link: function (scope, element, attrs, ctrls) {
                checkDirectivePrerequisites(attrs);

                scope.$watch(attrs.focusOnCondition, function (currentValue, lastValue) {
                    if(currentValue == true) {
                        $timeout(function () {                                                
                            element.focus();
                        });
                    }
                });
            }
        };
    }
]);

একটি সম্ভাব্য ব্যবহার

.controller('Ctrl', function($scope) {
   $scope.myCondition = false;
   // you can just add this to a radiobutton click value
   // or just watch for a value to change...
   $scope.doSomething = function(newMyConditionValue) {
       // do something awesome
       $scope.myCondition = newMyConditionValue;
  };

});

এইচটিএমএল

<input focus-on-condition="myCondition">

Comments

কি ঘটবে যখন myCondition$ সুযোগ পরিবর্তনশীল ইতিমধ্যে সত্যতে সেট এবং তারপর ব্যবহারকারী তা চয়ন অন্য উপাদানে ফোকাস করতে হয়েছে, আপনি কি এখনও ফোকাস যখন retrigger পারেন myConditionইতিমধ্যে সত্য, আপনার কোড অ্যাট্রিবিউট পরিবর্তনগুলি ঘড়ির focusOnConditionকিন্তু এটি ট্রিগার যখন না করবে না আপনি যে মানটি পরিবর্তন করার চেষ্টা করছেন তা এখনও একই।

— রাইবালার

আমি আমরা দুই রেডিও বোতাম আছে, এবং আমরা সত্য বা মিথ্যা মান উপর নির্ভর করে পতাকা টগল, নমুনা আপডেট করতে যাচ্ছি আমাদের ক্ষেত্রে, আপনি শুধু myCondition পতাকা সত্য বা অসত্য হিসাবে পরিবর্তন হতে পারে

— Braulio

একটি জেনেরিক সমাধান মত মনে হচ্ছে। আইডির উপর নির্ভর করে ভাল। আমি এটা পছন্দ করি.

— মার্টব

যদি অন্য কেউ এটি চেষ্টা করে এবং এটি কাজ না করে তবে আমাকে এলিমেন্ট.ফোকাস () পরিবর্তন করতে হবে; উপাদান থেকে [0] .ফোকাস ();

— অ্যাড্রিয়ান কার

এই সমাধানটি উপরের আইডি-ভিত্তিক হ্যাকের চেয়ে অনেক বেশি 'কৌণিক উপায়'।

— setec

Answer 3

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

এটিকে সুযোগের সাথে সংযুক্ত করার জন্য এখানে একটি সরল পদ্ধতি রয়েছে। নিয়ামক-হিসাবে সিনট্যাক্স পরিচালনা করার জন্য সম্পূর্ণ স্নিপেট দেখুন।

নির্দেশিকা:

app.directive('inputFocusFunction', function () {
    'use strict';
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            scope[attr.inputFocusFunction] = function () {
                element[0].focus();
            };
        }
    };
});

এবং এইচটিএমএলে:

<input input-focus-function="focusOnSaveInput" ng-model="saveName">
<button ng-click="focusOnSaveInput()">Focus</button>

বা নিয়ামক মধ্যে:

$scope.focusOnSaveInput();

angular.module('app', [])
  .directive('inputFocusFunction', function() {
    'use strict';
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        // Parse the attribute to accomodate assignment to an object
        var parseObj = attr.inputFocusFunction.split('.');
        var attachTo = scope;
        for (var i = 0; i < parseObj.length - 1; i++) {
          attachTo = attachTo[parseObj[i]];
        }
        // assign it to a function that focuses on the decorated element
        attachTo[parseObj[parseObj.length - 1]] = function() {
          element[0].focus();
        };
      }
    };
  })
  .controller('main', function() {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<body ng-app="app" ng-controller="main as vm">
  <input input-focus-function="vm.focusOnSaveInput" ng-model="saveName">
  <button ng-click="vm.focusOnSaveInput()">Focus</button>
</body>

এই পদ্ধতির কারণ সম্পর্কে আরও ব্যাখ্যা প্রদান এবং নিয়ামক হিসাবে ব্যবহারের জন্য কোড স্নিপেট প্রসারিত করার জন্য সম্পাদিত ।

Comments

এটি খুব সুন্দর, এবং আমার জন্য ভাল কাজ করে চলেছে। তবে এখন আমার ব্যবহার করে ইনপুটগুলির একটি সেট রয়েছে ng-repeatএবং আমি কেবল প্রথমটির জন্য ফোকাস ফাংশনটি সেট করতে চাই। কোন ধারণা আমি শর্তসাপেক্ষে জন্য একটি ফোকাস ফাংশন সেট পারে <input>উপর ভিত্তি করে $indexউদাহরণস্বরূপ?

— গ্যারেট উইলসন

খুশী এটা কার্যকর। আমার কৌণিক 1 সামান্য মরিচা, তবে আপনি যদি সঠিক না হয় তবে কোনও assign-focus-function-if="{{$index===0}}"ক্রিয়াকলাপ নির্ধারণের আগে প্রথম দিকের নির্দেশিকা প্রস্থানের প্রথম লাইন হিসাবে ইনপুটটিতে অন্য একটি বৈশিষ্ট্য যুক্ত করতে সক্ষম হবেন : if (attr.assignFocusFunctionIf===false) return; দ্রষ্টব্য আমি পরীক্ষা করছি কিনা এটি স্পষ্টভাবে falseএবং কেবল মিথ্যা নয় তাই নির্দেশটি এখনও কাজ করবে যদি সেই বৈশিষ্ট্যটি সংজ্ঞায়িত না করা হয়।

— সিস্ট্রিক্লান

কন্ট্রোলার হিসাবে লোডাস সহ অনেক সহজ is _.set(scope, attributes.focusOnSaveInput, function() { element.focus(); })।

— এটোমস্ক

Answer 4

আপনি চেষ্টা করতে পারেন

angular.element('#<elementId>').focus();

যেমন।

angular.element('#txtUserId').focus();

এটা আমার জন্য কাজ করে।

Comments

দ্রষ্টব্য: এটি কেবলমাত্র কাজ করবে যদি কৌণিক এম্বেড থাকা jqLite এর উপর নির্ভর না করে পূর্ণ jQuery ব্যবহার করা হয়। Docs.angularjs.org/api/ng/function/angular.element

— জন রিক্স

এটি এটি করার jQuery উপায়, কৌনিক উপায় নয়। প্রশ্নটি বিশেষভাবে এটি কীভাবে কৌণিক উপায়ে করবেন তা জিজ্ঞাসা করে।

— ক্ষমা করুন

Answer 5

অন্য বিকল্পটি হ'ল আপনার নির্দেশকে ফোকাস করার জন্য অবহিত করার জন্য অ্যাংুলারের অন্তর্নির্মিত পাব-সাব আর্কিটেকচার ব্যবহার করা। অন্যান্য পদ্ধতির মতো, তবে এটি সরাসরি কোনও সম্পত্তিতে আবদ্ধ হয় না এবং পরিবর্তে কোনও নির্দিষ্ট কীটির সুযোগটি শুনছে।

নির্দেশিকা:

angular.module("app").directive("focusOn", function($timeout) {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      scope.$on(attrs.focusOn, function(e) {
        $timeout((function() {
          element[0].focus();
        }), 10);
      });
    }
  };
});

এইচটিএমএল:

<input type="text" name="text_input" ng-model="ctrl.model" focus-on="focusTextInput" />

নিয়ন্ত্রক:

//Assume this is within your controller
//And you've hit the point where you want to focus the input:
$scope.$broadcast("focusTextInput");

Answer 6

আমি একটি এক্সপ্রেশন ব্যবহার পছন্দ। ক্ষেত্রটি বৈধ হলে কোনও নির্দিষ্ট দৈর্ঘ্যে পৌঁছায় এবং অবশ্যই লোডের পরে অবশ্যই এটি বোতামে ফোকাসের মতো জিনিসগুলি করতে দেয়।

<button type="button" moo-focus-expression="form.phone.$valid">
<button type="submit" moo-focus-expression="smsconfirm.length == 6">
<input type="text" moo-focus-expression="true">

জটিল আকারে এটি ফোকাসের উদ্দেশ্যে অতিরিক্ত স্কোপ ভেরিয়েবলগুলি তৈরি করার প্রয়োজনকে হ্রাস করে।

Https://stackoverflow.com/a/29963695/937997 দেখুন