AngularJS를 사용하여 앵커 태그 활성화 / 비활성화

AngularJS를 사용하여 앵커 태그 활성화 / 비활성화

---

지시문 접근 방식을 사용하여 앵커 태그를 활성화 / 비활성화하려면 어떻게합니까?

예:

1. 편집 링크를 클릭하는 동안 생성 및 삭제를 비활성화하거나 회색으로 표시해야합니다.
2. 링크 만들기를 클릭하는 동안 편집 및 삭제를 비활성화하거나 회색으로 표시해야합니다.

자바 스크립트 :

    angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){

    $scope.create = function(){
      console.log("inside create");
    };

    $scope.edit = function(){
      console.log("inside edit");
    };

    $scope.delete = function(){
    console.log("inside delete");
    };

    }]).directive('a', function() {
       return {
            restrict: 'E',
            link: function(scope, elem, attrs) {
                if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                    elem.on('click', function(e){
                        e.preventDefault();
                        if(attrs.ngClick){
                            scope.$eval(attrs.ngClick);
                        }
                    });
                }
            }
       };
    }); 

CODE에 링크

---

업데이트 : href를 비활성화하면 링크 함수 반환에서 더 잘 작동합니다. 아래 코드가 업데이트되었습니다.

aDisabledngClick지시문이 알파벳 순서로 정렬 되기 때문에 자연스럽게 이전에 실행 됩니다. 의 aDisabled이름을 tagDisabled로 바꾸면 지시문이 작동 하지 않습니다 .

---

"a"태그를 "비활성화"하려면 다음 사항이 필요합니다.

1. href 클릭했을 때 따라갈 수없는 링크
2. ngClick 클릭시 실행되지 않는 이벤트
3. disabled클래스 를 추가하여 변경된 스타일

이 지시문은 ngDisabled 지시문을 모방하여이를 수행합니다. a-disabled지시문 의 값에 따라 위의 모든 기능이 토글됩니다.

myApp.directive('aDisabled', function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            //Disable ngClick
            tAttrs["ngClick"] = "!("+tAttrs["aDisabled"]+") && ("+tAttrs["ngClick"]+")";

            //return a link function
            return function (scope, iElement, iAttrs) {

                //Toggle "disabled" to class when aDisabled becomes true
                scope.$watch(iAttrs["aDisabled"], function(newValue) {
                    if (newValue !== undefined) {
                        iElement.toggleClass("disabled", newValue);
                    }
                });

                //Disable href on click
                iElement.on("click", function(e) {
                    if (scope.$eval(iAttrs["aDisabled"])) {
                        e.preventDefault();
                    }
                });
            };
        }
    };
});

다음은 비활성화 된 태그를 나타낼 수있는 CSS 스타일입니다.

a.disabled {
    color: #AAAAAA;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

그리고 여기에 귀하의 예제와 함께 작동중인 코드가 있습니다.

---

내 문제는 약간 달랐습니다.을 정의하는 앵커 태그가 href있고 ng-disabled클릭했을 때 링크가 아무데도 가지 않도록하는 데 사용하고 싶습니다 . 해결책은 href다음과 같이 링크가 비활성화 된 경우를 설정 해제하는 것입니다 .

<a ng-href="{{isDisabled ? '' : '#/foo'}}"
   ng-disabled="isDisabled">Foo</a>

이 경우 ng-disabled는 요소 스타일 지정에만 사용됩니다.

비공식 속성을 사용 하지 않으려면 직접 스타일을 지정해야합니다.

<style>
a.disabled {
    color: #888;
}
</style>
<a ng-href="{{isDisabled ? '' : '#/foo'}}"
   ng-class="{disabled: isDisabled}">Foo</a>

---

복잡한 대답을 원하지 않는 사람들을 위해 Ng-If를 사용하여 비슷한 문제를 해결했습니다.

<div style="text-align: center;">
 <a ng-if="ctrl.something != null" href="#" ng-click="ctrl.anchorClicked();">I'm An Anchor</a>
 <span ng-if="ctrl.something == null">I'm just text</span>
</div>

---

동적 비활성화 작업을 위해 @Nitin의 답변 수정 :

angular.module('myApp').directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      elem.on('click', function(e) {
        if (attrs.disabled) {
          e.preventDefault(); // prevent link click
        }
      });
    }
  };
});

클릭 할 때마다 비활성화 된 속성의 존재와 그 값을 확인합니다.

---

부인 성명:

OP는 다른 답변에 대해이 의견을 남겼습니다.

버튼이나 입력 태그에 대해 ngDisabled를 사용할 수 있습니다. CSS를 사용하여 버튼을 앵커 태그처럼 보이게 만들 수는 있지만 그다지 도움이되지는 않습니다! 지시적 접근 방식이나 각도 방식을 사용하여 어떻게 할 수 있는지 더 궁금했습니다.

---

컨트롤러 범위 내에서 변수를 사용하여 클릭 한 마지막 버튼 / 링크에 따라 링크 / 버튼을 비활성화하고을 사용 ng-click하여 변수를 올바른 값 ng-disabled으로 설정하고 필요할 때 변수의 값.

나는 당신에게 아이디어를 제공하기 위해 당신의 Plunker 를 업데이트했습니다 .

하지만 기본적으로 다음과 같습니다.

 <div>
       <button ng-click="create()" ng-disabled="state === 'edit'">CREATE</button><br/>
       <button ng-click="edit()" ng-disabled="state === 'create'">EDIT</button><br/>
       <button href="" ng-click="delete()" ng-disabled="state === 'create' || state === 'edit'">DELETE</button>
    </div>

---

다음과 같은 식의 게으른 평가를 사용해 보셨습니까 disabled || someAction()?

컨트롤러에서 다음과 같이 정의했다고 가정 해 보겠습니다.

$scope.disabled = true;

그런 다음 링크를 비활성화하고 다음과 같이 인라인 스타일을 적용 할 수 있습니다.

<a data-ng-click="disabled || (GoTo('#/employer/'))" data-ng-style="disabled && { 'background-color': 'rgba(99, 99, 99, 0.5)', }">Higher Level</a>

또는 링크를 비활성화하고 다음과 같이 클래스를 적용하는 것이 좋습니다.

<a data-ng-click="disabled || (GoTo('#/employer/'))" data-ng-class="{ disabled: disabled }">Higher Level</a>

참고 : 해당 class="disabled"문에 의해 DOM 요소에 적용됩니다.

이 단계에서는 당신이 할 일을 처리하기 만하면 GoTo()됩니다. 제 경우에는 관련 상태로 리디렉션하는 것처럼 간단합니다.

$scope.GoTo = function (state) {
    if (state != undefined && state.length > 0) {
        $window.location.hash = state;
    }
};

ngDisabled당신에 의해 제한되기보다는 당신이하기로 결정한 것에 의해 제한됩니다.

이 기술을 사용하여 모듈의 특정 부분에 대한 사용자 액세스를 활성화 또는 비활성화하기 위해 권한 수준 검사를 성공적으로 적용했습니다.

요점을 보여주는 간단한 플 런커

---

ng-disabled와 비슷한 사용자 지정 지시문을 만들고 다음과 같은 방법으로 특정 요소 집합을 비활성화 할 수 있습니다.

1. 사용자 지정 지시문의 속성 변경 사항을 감시합니다 (예 : my-disabled.
2. 추가 된 이벤트 핸들러없이 현재 요소를 복제합니다.
3. css 속성을 복제 된 요소 및 요소의 비활성화 된 상태를 제공하는 기타 속성 또는 이벤트 핸들러에 추가합니다.
4. 감시 된 속성에서 변경 사항이 감지되면 현재 요소를 복제 된 요소로 바꿉니다.

HTML

   <a my-disabled="disableCreate" href="#" ng-click="disableEdit = true">CREATE</a><br/>
   <a my-disabled="disableEdit" href="#" ng-click="disableCreate = true">EDIT</a><br/>
   <a my-disabled="disableCreate || disableEdit" href="#">DELETE</a><br/>
   <a href="#" ng-click="disableEdit = false; disableCreate = false;">RESET</a>

자바 스크립트

directive('myDisabled', function() {
  return {

    link: function(scope, elem, attr) {
      var color = elem.css('color'),
          textDecoration = elem.css('text-decoration'),
          cursor = elem.css('cursor'),
          // double negation for non-boolean attributes e.g. undefined
          currentValue = !!scope.$eval(attr.myDisabled),

          current = elem[0],
          next = elem[0].cloneNode(true);

      var nextElem = angular.element(next);

      nextElem.on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
      });

      nextElem.css('color', 'gray');
      nextElem.css('text-decoration', 'line-through');
      nextElem.css('cursor', 'not-allowed');
      nextElem.attr('tabindex', -1);

      scope.$watch(attr.myDisabled, function(value) {
        // double negation for non-boolean attributes e.g. undefined
        value = !!value;

        if(currentValue != value) {
          currentValue = value;
          current.parentNode.replaceChild(next, current);
          var temp = current;
          current = next;
          next = temp;
        }

      })
    }
  }
});

---

해당 범위에서 토글 기능 을 만들어 링크 를 회색으로 표시합니다 .

먼저 .css 파일에 다음 CSS 클래스를 만듭니다.

.disabled {
    pointer-events: none;
    cursor: default;
}

.enabled {
    pointer-events: visible;
    cursor: auto;
}

$ scope.state 및 $ scope.toggle 변수를 추가하십시오. 다음과 같이 JS 파일에서 컨트롤러를 편집하십시오.

    $scope.state='on';
    $scope.toggle='enabled';
    $scope.changeState = function () {
                $scope.state = $scope.state === 'on' ? 'off' : 'on';
                $scope.toggleEdit();
            };
    $scope.toggleEdit = function () {
            if ($scope.state === 'on')
                $scope.toggle = 'enabled';
            else
                $scope.toggle = 'disabled';
        };

이제 HTML에서 태그는 다음과 같이 편집됩니다.

<a href="#" ng-click="create()" class="{{toggle}}">CREATE</a><br/>
<a href="#" ng-click="edit()" class="{{toggle}}">EDIT</a><br/>
<a href="#" ng-click="delete()" class="{{toggle}}">DELETE</a>

To avoid the problem of the link disabling itself, change the DOM CSS class at the end of the function.

document.getElementById("create").className = "enabled";

---

You may, redefine the a tag using angular directive:

angular.module('myApp').directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      if ('disabled' in attrs) {
        elem.on('click', function(e) {
          e.preventDefault(); // prevent link click
        });
      }
    }
  };
});

In html:

<a href="nextPage" disabled>Next</a>

---

I'd expect anchor tags to lead to a static page with a url. I think that a buttons suits more to your use case, and then you can use ngDisabled to disable it. From the docs: https://docs.angularjs.org/api/ng/directive/ngDisabled

---

ui-router v1.0.18 introduces support for ng-disabled on anchor tags

Example: <a ui-sref="go" ng-disabled="true">nogo</a>

• https://github.com/angular-ui/ui-router/issues/2957

• https://github.com/angular-ui/ui-router/pull/3692/commits/a59fcae300f9d8f73a5b91fa77c92b926e68281d

ReferenceURL : https://stackoverflow.com/questions/23425254/enable-disable-anchor-tags-using-angularjs