angularjs - 분리 - 앵귤러js 단점




각도로 요소 초점 설정 (4)

각도로 초점 요소를 설정하는 방법에 대한 예제를 찾은 후, 대부분은 변수를 사용하여 초점을보고 초점을 설정하고 대부분은 초점을 설정하려는 각 필드마다 하나의 다른 변수를 사용한다는 것을 알았습니다. 많은 필드를 가진 형태로, 그것은 많은 다른 변수를 의미합니다.

jquery 방식을 염두에두고 각도 방식으로하고 싶을 때 요소의 ID를 사용하여 모든 기능에 초점을 맞추는 솔루션을 만들었으므로 각도가 매우 새롭기 때문에 몇 가지 의견을 얻고 싶습니다. 그 방법은 옳고 문제가 있습니다.

기본적으로 지시어 또는 기본 focusElement를 사용하여 사용자가 정의한 범위 값을보고 지시문을 작성하고 해당 값이 요소의 id와 동일하면 해당 요소 세트가 자체적으로 초점을 설정합니다.

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";
}

각도에서 좋은 해결책입니까? 내 경험이 좋지 않아 아직 보지 못하는 문제가 있습니까?


가능한 한 DOM 조회, 시계 및 전역 이미 터를 피하고 싶어하므로보다 직접적인 접근 방식을 사용합니다. 지시문을 사용하여 지시문 요소에 중점을 둔 간단한 함수를 지정하십시오. 그런 다음 컨트롤러 범위 내에서 필요할 때마다 해당 기능을 호출하십시오.

범위에 연결하는 간단한 방법은 다음과 같습니다. 컨트롤러로 구문을 처리하려면 전체 스 니펫을 참조하십시오.

지령:

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

그리고 html로 :

<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>

이 접근 방식의 이유에 대한 자세한 설명을 제공하고 제어기 사용을 위해 코드 스 니펫을 확장하도록 편집 되었습니다.


나는 표현을 선호했다. 이를 통해 필드가 유효하고 특정 길이에 도달하고 물론로드 후 버튼에 초점을 맞추는 것과 같은 작업을 수행 할 수 있습니다.

<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://.com/a/29963695/937997


또 다른 옵션은 Angular의 내장 pub-sub 아키텍처를 사용하여 지시에 집중하도록 알리는 것입니다. 다른 접근 방식과 비슷하지만 속성에 직접 연결되지 않고 대신 특정 키의 범위를 수신 대기합니다.

지령:

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);
      });
    }
  };
});

HTML :

<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");

솔루션의 문제는 새로운 범위를 생성하는 다른 지시문 (예 : ng-repeat 묶여 있으면 제대로 작동하지 않는다는 것입니다. 더 나은 솔루션은 컨트롤러 내에서 요소를 필수적으로 집중 시키거나 HTML에서 요소를 선언적으로 집중시킬 수있는 서비스 기능을 만드는 것입니다.

DEMO

자바 스크립트

서비스

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

HTML

<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>




setfocus