如何做到这一点＆QUOT; UI-SREF＆QUOT;有条件地执行？ [英] How to achieve that "ui-sref" be conditionally executed?

问题描述

我想验证某些条件下浏览器之前遵循UI路由器动态创建的链接。

I want to validate certain condition before the browser follow the link dynamically created by ui-router.

我一直在寻找到 $ rootscope。在$（'$ stateChangeStart'，..），但我必须在控制器的访问权限。$范围从那里。我还需要在应用程序的多个地方使用这一点，会很麻烦。

I was looking into $rootscope.$on('$stateChangeStart', ..) but I have no access to the controller.$scope from there. I also need to use this in several places in the application and would be cumbersome.

请记住， UI-SREF 链接到 UI-SREF主动（协同工作），所以我无法删除 UI-SREF ，并通过比方说，使用 $状态去$（'一些国家'） A调用功能NG-点击。

Keep in mind that ui-sref is linked to ui-sref-active (work together), so i can't remove ui-sref and, by say, to use $state.$go('some-state') inside a function called with ng-click.

该条件应在 $范围函数内部评估和上单击事件（与前过渡取消它的能力）

The condition should be evaluated inside a $scope function and on on-click event (before-transition with the ability to cancel it)

我需要的东西是这样的：

I need something like this:

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

但不起作用。

SANDBOX

推荐答案

这<一个href=\"http://stackoverflow.com/questions/10931315/how-to-$p$pventdefault-on-anchor-tags-in-angularjs/14165848#14165848\">answer启发我创造了一项指令，让我打断了最终改变状态的事件链。在相同的元素为方便和其他用途也prevents执行NG点击。

This answer inspired me to create a directive that allows me to interrupt the chain of events that end up changing state. For convenience and other uses also prevents the execution of ng-click on the same element.

的JavaScript

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>

PLUNKER

这篇关于如何做到这一点＆QUOT; UI-SREF＆QUOT;有条件地执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！