조건에 따라 ui-sref 사용 안 함

조건에 따라 ui-sref 사용 안 함

송신 버튼을 무효로 하는 방법을 가르쳐 주세요.이 버튼은 다음과 같이 새로운 상태로 바뀝니다.

<a ui-sref="state">Submit</a>

이 버튼은 양식이 유효한 경우에만 활성화해야 합니다.

ng-disabled와 함께ui-sref동작하지 않음:

<form name="tickets">
  <button ng-disabled="!canSave()"><a ui-sref="view">Submit</a></button>
</form>

다음 조건의 app.js에 함수를 저장할 수 있습니다.

$scope.canSave = function(){
  return $scope.tickets.$dirty && $scope.tickets.$valid;
};

간단하게 조합할 수 있습니다.ng-click하도록ng-disabled효과가 있습니다.

.controller('myCtrl', function($scope, $state) {
    // so that you can call `$state.go()` from your ng-click
    $scope.go = $state.go.bind($state);
})

<!-- call `go()` and pass the state you want to go to -->
<button ng-disabled="!canSave()" ng-click="go('view')>Submit</button>

커스텀 디렉티브를 사용하는 보다 세련된 방법은 다음과 같습니다.

angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
  $stateProvider.state('home', {
    url: '/'
  });
})
.controller('myCtrl', function() {
  
})
.directive('uiSrefIf', function($compile) {
  return {
    scope: {
      val: '@uiSrefVal',
      if: '=uiSrefIf'
    },
    link: function($scope, $element, $attrs) {
      $element.removeAttr('ui-sref-if');
      $compile($element)($scope);
      
      $scope.$watch('if', function(bool) {
        if (bool) {
          $element.attr('ui-sref', $scope.val);
        } else {
          $element.removeAttr('ui-sref');
          $element.removeAttr('href');
        }
        $compile($element)($scope);
      });
    }
  };
})
;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="form">
    <input ng-model="foo" ng-required="true">
    <button ng-disabled="form.$invalid">
      <a ui-sref-if="!form.$invalid" ui-sref-val="home">test</a>
    </button>
  </form>
</div>

이 문제에 대한 순수한 CSS 솔루션이 있습니다.

태그의 포인터 이벤트를 none으로 설정합니다.

button[disabled] > a {
    pointer-events: none;
}

물론 원하는 버튼만을 대상으로 하는 보다 정확한 CSS 셀렉터를 설정해야 합니다.

@m59에 의해 제공되는 지시(분리된 스코프를 도입하지 않음):

.directive('uiSrefIf', function($compile) {
    return {
        link: function($scope, $element, $attrs) {

            var uiSrefVal = $attrs.uiSrefVal,
                uiSrefIf  = $attrs.uiSrefIf;

            $element.removeAttr('ui-sref-if');
            $element.removeAttr('ui-sref-val');



            $scope.$watch(
                function(){
                    return $scope.$eval(uiSrefIf);
                },
                function(bool) {
                    if (bool) {

                        $element.attr('ui-sref', uiSrefVal);
                    } else {

                        $element.removeAttr('ui-sref');
                        $element.removeAttr('href');
                    }
                    $compile($element)($scope);
                }
            );
        }
    };
})

템플릿에서 조건부로 실행하는 가장 쉬운 방법

조건이 충족되면 현재 상태를 가리키고 전환이 활성화되지 않으면 필요한 상태로 전환합니다.

<a ui-sref="{{ 1==1 ? '.': 'state({param:here})'}}">Disabled Link</a> 

격리 스코프와 앵커 내부의 다른 디렉티브 사용에 문제가 있었습니다.따라서 Iscolate 스코프를 일반 속성으로 대체해 보겠습니다.

angular.module('app').directive('uiSrefIf', ['$compile', function($compile) {
  var directive = {
    restrict: 'A',
    link: linker
  };

  return directive;

  function linker(scope, elem, attrs) {
    elem.removeAttr('ui-sref-if');
    $compile(elem)(scope);

    scope.$watch(attrs.condition, function(bool) {
      if (bool) {
        elem.attr('ui-sref', attrs.value);
      } else {
        elem.removeAttr('ui-sref');
        elem.removeAttr('href');
      }

      $compile(elem)(scope);
    });
  }
}]);

Html 이렇게 생겼어요.

<a ui-sref-if condition="enableLink()" value="init.main">
    <cover class="card-image" card="card"></cover>
</a>

ui-router v1.0.18대한 지원 도입ng-disabled앵커 태그에 부착되어 있습니다.

ui-sref에서는 코드화에 따라 URL을 숨길 수 있습니다.예를 들어 i는 이 코드를 가지고 있으며 URL에서 동작합니다.

<a ui-sref="category-edit({pk:category.id})" ng-show="canEdit(category.owner)" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i></a>

내 컨트롤러에

$scope.canEdit = function(category){
   return category == AuthUser.username ;
}

Authuser는 제 메인 페이지에 있는 공장입니다.

<script>
    // Configure the current user
    var app = angular.module('myApp'); // Not including a list of dependent modules (2nd parameter to `module`) "re-opens" the module for 
    app.factory('AuthUser', function() {
      return {
       username: "{{ user.username|default:''|escapejs }}"
      }
   });
</script>

언급URL : https://stackoverflow.com/questions/28973530/disable-ui-sref-based-on-a-condition