Ограничение ng-href путем проверки в AngularJS

Question

Я искал решение для этого решения и был в тупике. Я немного нового для AngularJS, поэтому я не знаю всех хороших трюков, которые у него есть. У меня есть многочастная форма: HTTP GET ed в конце, используя ng-href. Вот фрагмент кода, который представляет все.

<a ng-href="#/report/{{ctrl.model}}" ng-click="ctrl.createReport()">Finish</a>

теперь я столкнулся с добавлением валидаций к этой форме, и я хочу, чтобы предотвратить соединение от соблюдаются, если проверка не пройдена. Логика проверки содержится в функции контроллера, функция возвращает истинную или ложную базу в результате проверки.

К сожалению, этот фрагмент кода является частью большой реализации, разработанной кем-то еще. Я просто хочу добавить часть проверки, не изменяя слишком много логики в коде.

Есть ли способ поставить условие на ng-href? Таким образом, когда нажата кнопка Finish, браузер будет следовать только по URL-адресу, если проверка прошла. В противном случае, есть ли в любом случае выполнить то же самое GET в контроллере? Я посмотрел на использование $http.get() и $window.location.href. Первый кажется AJAX, который не перенаправляет браузер на URL-адрес имени. Последнее, я не знаю, как развернуть ctrl.model в строку GET.

Любые мысли, идеи, предложения были бы весьма признательны. Благодаря!!!

Решение Используется

HTML:

<a data-ng-click="ctrl.createReport()">Finish</a> 

JS:

if (validate()) { 
    $location.path('/report/' + angular.toJson(self.model, false)); 
} 

Answer 1

удалить нг-HREF все вместе. и используйте службу определения местоположения $.

function createReport(){ 
    if(myForm.$valid){ 
     $location.path('/report'+model); 
    } 
} 

Answer 2

К сожалению, этот кусок кода является частью большого implementat ион, разработанный кем-то другим. Я просто хочу добавить часть проверки, не изменяя слишком много логики в коде.

У меня есть взлом для вас. Эта директива ест щелчок, если выражение возвращает false. Таким образом, href никогда не следует браузером. Также предотвращает выполнение ng-click.

Javascript

module.directive('eatClickIf', ['$parse', '$rootScope', 
    function($parse, $rootScope) { 
    return { 
     // this ensure eatClickIf be compiled before ngClick and ngHref 
     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

<a ng-href="#/report/{{ctrl.model}}" 
    ng-click="ctrl.createReport()" 
    eat-click-if="!ctrl.modelIsValid()">Finish</a> 

Answer 3

Я предлагаю вам удалить ng-href значение и изменить путь от Js условия использования $location

<a ng-href="" ng-click="ctrl.createReport()">Finish</a> 

Вводят $location sservice и сделать:

$location.path('/newValue')