我想在浏览器遵循ui-router动态创建的链接之前验证某些条件。
我正在调查,$rootscope.$on('$stateChangeStart', ..)但无法controller.$scope从那里访问。我还需要在应用程序中的多个地方使用它,这会很麻烦。
$rootscope.$on('$stateChangeStart', ..)
controller.$scope
请记住,ui-sref它链接到ui-sref-active(一起工作),因此我无法删除ui-sref,也不能$state.$go('some- state')在称为with的函数内使用ng-click。
ui-sref
ui-sref-active
$state.$go('some- state')
ng-click
应该在a $scope function和on 内评估条件on-click event(在转换之前,可以取消条件)
$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的操作。
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>
朋克