如何实现有条件地执行“ ui-sref”？

Question

我想在浏览器遵循ui-router动态创建的链接之前验证某些条件。

我正在调查，$rootscope.$on('$stateChangeStart', ..)但无法controller.$scope从那里访问。我还需要在应用程序中的多个地方使用它，这会很麻烦。

请记住，ui-sref它链接到ui-sref-active（一起工作），因此我无法删除ui-sref，也不能$state.$go('some- state')在称为with的函数内使用ng-click。

应该在a $scope function和on 内评估条件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>

但是不起作用。

沙盒

Answer 1

这个答案激发了我创建一条指令，该指令使我可以中断一系列事件，这些事件最终导致状态发生变化。为了方便起见和其他用途，也阻止了对同一元素执行ng-click的操作。

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>

朋克