Question

我一直在寻找解决这个问题的方法并且已经被困住了。我是AngularJS的新手，所以我不知道它还有什么好的技巧。我使用 ng-href 在最后编辑了 HTTP GET 的多部分表单。这是提交所有内容的代码段。

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

现在，我正面临向此表单添加验证，并且我希望在验证失败时阻止链接被跟踪。验证逻辑包含在控制器函数中，该函数将根据验证结果返回true或false。

不幸的是，这段代码是其他人开发的大型实现的一部分。我只想添加验证部分，而不必在代码中修改过多的逻辑。

有没有办法在ng-href上加上条件？因此，当单击完成时，如果验证通过，浏览器将仅跟踪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

一起删除ng-href。并使用$ location服务。

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

Answer 2

不幸的是，这段代码是其他人开发的大型实现的一部分。我只想添加验证部分，而不必在代码中修改过多的逻辑。

我有一个黑客为你。如果表达式返回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值并使用$location

从js条件更改路径

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

注入$location服务并执行：

$location.path('/newValue')

通过AngularJS中的验证来限制ng-href

3 个答案: