Javascript 如何做到这一点；用户界面sref“；被有条件地执行？

我想在浏览器跟随ui路由器动态创建的链接之前验证某些条件

我在（“$stateChangeStart”，…）上查看

$rootscope.$on，但我无法从那里访问
控制器。$scope
。我还需要在应用程序中的几个地方使用它，这会很麻烦

请记住，
ui-sref
链接到
ui-sref-active
（协同工作），因此我不能删除
ui-sref
，也不能在使用
ng click
调用的函数中使用
$state.$go（'some-state'）

应在
$scope函数
内以及在
点击事件
上评估该条件（在转换之前，可取消该条件）

我需要这样的东西：

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


您可以使用范围函数，该函数将返回：


无州


现状

像这样：



HTML:

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

仅当函数返回现有状态字符串时，才会创建
href
属性

或者，你可以做一个（丑陋的）：


去某个州
去某个州


希望这对您有所帮助
您可以随时将元素折叠起来并有条件地显示/隐藏

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


这启发我创建了一个指令，允许我中断最终改变状态的事件链。为了方便和其他用途，还可以防止在同一元素上执行ng单击

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>


根据对的回答，您可以在自己的范围内创建一个函数来构建URL：

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

然后有条件地将其附加到具有




链接激活？
不需要复杂的指令或黑客。以下操作很好，并允许在单击非
sref
项时进行特定处理：

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

有条件地实现路由而无需修改指令、范围等的最简单的解决方法是我在这里找到的一个解决方法-

条件链接
我知道这是一个老问题，但为了将来参考，我想提供一个替代解决方案，因为到目前为止，我在任何答案中都没有看到它

所需：

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

对于仍然需要
ng的用户，可能的解决方案单击
ui-sref
组件或其父组件

我的解决方案是使用
href
而不是
ui-sref
，并稍微修改指令，以便能够分别停止
href
和
ng-click
调用


尽管它有一些限制：


无法使用
ui-sref
由于前面的限制，每个州应该有不同的URL
ui-sref-active
也将不起作用
基本上，您希望在用户访问该链接时测试特定条件，然后决定他是否可以继续使用该链接？是的，但在应用程序级别，状态会发生变化。链接不是字面上的。需要，以便我可以防止它发生。在尝试您的
checkCondition（）
方法时，我仍然会遇到控制台错误。它说，
无法从州“家”解析“-”
我喜欢这个答案，因为这是最快的解决方法
ui sref=“{condition？'.childState'：'.}}”
@chovy a'.'本身而不是“-”将返回当前状态以防止错误：$rootScope.$on（$stateNotFound），函数（event，unfoundState，fromState，fromsparams）{if（unfoundState.to='-'）{event.preventDefault（）；return；}）@chovy我也遇到了同样的问题，并在返回
return$state.href（'login'，{}，{absolute:true}）后将其放在
href=“checkCondition（）”
中它们应该真正包含此功能。它可以重命名为
ui sref disable
。考虑打开一个拉动请求，“单向！”这太棒了。谢谢你的这一点。我同意@DesignerGuy，它应该被禁用
ui-sref
@DesignerGuy…我们做到了，这就是他们回答我们要做的：复制这个模块：-D:-D:-D----这里的链接----->这是一个解决方法。有更简单、有效、通用的方法来处理这个问题。参考任何其他答案。这看起来不会阻止用户使用键盘关注链接。屏幕阅读器会发生什么情况？这对我没有帮助，因为我不想让按钮变灰。我只想弹出一个警告，上面写着“你肯定要离开了吗？”
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() {}
        }
      }
    }
  }
]);

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

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

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

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

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

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