조건부로 "ui-sref"를 실행하는 방법은 무엇입니까?

조건부로 "ui-sref"를 실행하는 방법은 무엇입니까?

브라우저가 ui-router에 의해 동적으로 생성된 링크를 따라가기 전에 특정 조건을 검증하고 싶습니다.

알아보고 있었어요$rootscope.$on('$stateChangeStart', ..)하지만 저는 이 컴퓨터에 접속할 수 없습니다.controller.$scope거기서부터요.어플리케이션 내 여러 곳에서 사용해야 하기 때문에 번거롭습니다.

주의해 주세요ui-sref에 링크되어 있다.ui-sref-active(함께 일해서) 제거할 수 없습니다.ui-sref그리고, 말하자면,$state.$go('some-state')로 불리는 함수 내에서ng-click.

이 상태는 A의 내부에서 평가되어야 합니다.$scope function등on-click event(변경 전 취소 가능)

난 이런 게 필요해

<li ui-sref-active="active">
      <a ui-sref="somestate" ui-sref-if="model.validate()">Go Somestate</a>
</li>

나는 시도했다.

<li ui-sref-active="active">
      <a ui-sref="somestate" ng-click="$event.preventDefault()">Go Somestate</a>
</li>

<li ui-sref-active="active">
      <a ui-sref="somestate" ng-click="$event.stopImmediatePropagation()">Go Somestate</a>
</li>

그리고.

<li ui-sref-active="active">
    <a ui-sref="somestate">
       <span ng-click="$event.stopPropagation();">Go Somestate</span>
    </a>
</li>

심지어.

<li ui-sref-active="active">
      <a ui-sref="somestate" onclick="return false;">Go Somestate</a>
</li>

하지만 작동하지 않습니다.

샌드박스

이 답변은 제가 상태를 변화시키는 일련의 사건들을 중단시킬 수 있는 지침을 만들도록 영감을 주었습니다.편의 및 기타 사용을 위해 동일한 요소에서 ng-click을 실행하는 것도 방지합니다.

자바스크립트

module.directive('eatClickIf', ['$parse', '$rootScope',
  function($parse, $rootScope) {
    return {
      // this ensure eatClickIf be compiled before ngClick
      priority: 100,
      restrict: 'A',
      compile: function($element, attr) {
        var fn = $parse(attr.eatClickIf);
        return {
          pre: function link(scope, element) {
            var eventName = 'click';
            element.on(eventName, function(event) {
              var callback = function() {
                if (fn(scope, {$event: event})) {
                  // prevents ng-click to be executed
                  event.stopImmediatePropagation();
                  // prevents href 
                  event.preventDefault();
                  return false;
                }
              };
              if ($rootScope.$$phase) {
                scope.$evalAsync(callback);
              } else {
                scope.$apply(callback);
              }
            });
          },
          post: function() {}
        }
      }
    }
  }
]);

html

<li ui-sref-active="active">
      <a ui-sref="somestate" eat-click-if="!model.isValid()">Go Somestate</a>
</li>

플런커

다음 중 하나를 반환하는 스코프 함수를 사용할 수 있습니다.

• 상태 없음

• 현존 상태

  다음과 같이 합니다.

HTML:

<li ui-sref-active="active">
      <a ui-sref="{{checkCondition()}}">Go Somestate</a>
</li>

JS 범위:

$scope.checkCondition = function() {
    return model.validate()
        ? 'someState'
        : '-' // hack: must return a non-empty string to prevent JS console error
}

hrefAtribut은 함수가 기존 상태 문자열을 반환하는 경우에만 생성됩니다.

또는 (어색하게) 다음 작업을 수행할 수 있습니다.

<li ui-sref-active="active">
      <a ui-sref="somestate" ng-if="model.validate()">Go Somestate</a>
      <span ng-if="!model.validate()">Go Somestate</span>
</li>

도움이 되었으면 좋겠다

디렉티브나 스코프 등을 조작하지 않고 조건부로 루팅을 실현하기 위한 가장 쉬운 회피책은, 이쪽에서 찾을 수 있는 회피책입니다.

<a ui-sref="{{condition ? '.childState' : '.'}}"> Conditional Link </a>

언제든지 요소를 이중으로 하여 조건부로 표시하거나 숨길 수 있습니다.

    <li ui-sref-active="active">
          <a ng-show="condition1" style="color: grey">Start</a>
          <a ng-hide="condition1" ui-sref="start">Start</a>
    </li>

http://plnkr.co/edit/ts4yGW?p=preview

복잡한 지시나 해킹은 필요 없습니다.다음 기능은 정상적으로 작동하며 클릭 시 특정 처리를 허용합니다.sref항목:

<a 
  ng-repeat="item in items" ui-sref="{{item.sref || '-'}}" 
  ng-click="$ctrl.click(item, $event)"
>...</a>

또한 컨트롤러에서는 클릭 핸들러에 의해, 유저가 표시되지 않는 아이템의item.sref:

this.click = function(item, event) {
  if (!item.sref) {
    event.preventDefault();
    //do something else
  }
};

의 값을 동적으로 설정하는 방법에 대한 답변에 따라 URL을 구축하기 위한 함수를 스코프에 만들 수 있습니다.

$scope.buildUrl = function() {
  return $state.href('somestate', {someParam: 'someValue});
};

그런 다음 조건부로 링크에 추가합니다.

<a ng-href="{{ someCondition ? buildUrl() : undefined }}">Link</a>

아래 데모에서 볼 수 있듯이ng-href는 추가되지 않습니다.href값이 음수인 경우 속성을 지정합니다.

angular.module('app', [])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <a ng-href="{{ condition ? 'http://thecatapi.com/api/images/get?format=src&type=gif' : undefined}}">This is the link</a>
  <br>
  <label for="checkbox">
    <input type="checkbox" id="checkbox" ng-model="condition">
    Link active?
  </label>
</div>

오래된 질문인 것은 알지만, 지금까지의 답변에서는 본 적이 없기 때문에 향후의 참고용으로 대체 솔루션을 제안하고 싶다고 생각하고 있습니다.

희망 사항:

<li ui-sref-active="active">
    <a ui-sref="somestate" ui-sref-if="model.validate()">Go Somestate</a>
</li>

잠재적인 솔루션(템플릿):

<li ng-class="{ active: state.current.name === 'somestate' }">
    <a ng-click="navigateToState()">Go Somestate</a>
</li>

컨트롤러 내:

$scope.state = $state;
$scope.navigateToState = navigateToState;

function navigateToState() {
  if ($scope.model.valid) {
    $state.go('somestate');
  }
}

한 사람에게 가능한 해결책ng-clickui-sref컴포넌트 또는 그 부모.

은 제제은 my my를 이다.hrefui-sref이매뉴얼의 지시를 조금 수정해서href ★★★★★★★★★★★★★★★★★」ng-click이치노

플랭커

몇 가지 제한이 있습니다만,

• 와 함께 동작하지 않는다ui-sref
• 이전의 제한으로 인해 각 주마다 다른 URL이 있어야 합니다.
• ui-sref-active 쪽도 안 된다

바이너리 케이스(링크가 유효 또는 무효)의 경우는, 다음과 같이 동작합니다(클릭을 방지하고 무효로 설정).

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

기타 태그의 경우도 마찬가지입니다.

<span ui-sref="go" ng-disabled="true">nogo</span>

언급URL : https://stackoverflow.com/questions/25600071/how-to-achieve-that-ui-sref-be-conditionally-executed