如何使用Angular挂钩点击链接,并在点击完成之前添加href?

Mag*_*gne 6 javascript ajax angularjs

上下文:
当用户单击链接时,我必须从服务器获取URL.它不是事先可用的.点击链接应该正常,但使用该提取的URL.

程序如下:

  • 链接href="#"在单击之前包含
  • 单击该链接
  • 我用ng-mousedownor 挂钩,然后ng-click使用$http请求从服务器获取URL .
  • 使用URL更新链接的href.
  • 原始点击应该完成(使用新的网址,而不是#占位符).

问题出现在最后一步.由于$http请求是异步的,我怀疑存在时间问题.我的怀疑是:如果服务器请求足够快,它将通过,并在原始点击进行之前更改URL.如果没有,则原始点击进入并尝试转到#占位符URL.所以单击链接时不会发生任何事情.

我想让原始点击等待$http请求的结果与URL一起返回.原始点击很重要的原因是它可能是鼠标左键单击或鼠标中键(cmd +单击),我不知道哪一个,所以很难从javascript中自己调用它.

那么,关于如何使用获取的URL进行原始点击的任何聪明的想法?

mor*_*och 10

如果在检测到单击之前确实无法解析链接,那么最好使用ngClick指令调用可能在等待$ http承诺解析然后使用$ location时显示加载屏幕的函数. path()实际启动路由更改.例如:

HTML

<button ng-click="changeRoute($event)">Click me</button>
Run Code Online (Sandbox Code Playgroud)

和代码

angular.module('myApp', [])
  .controller('pageCtrl', function($scope, $http, $location, $window) {
    $scope.changeRoute = function(event) {
      console.log('Fetching URL');

      // The popup must be created before the callback, because the callback 
      // is not considered user-initiated by the browser. Non-user-initiated
      // events always open in a new browser window (not a tab).
      if (event.which === 2 || (event.which ===1 && (event.metaKey || event.ctrlKey))) {
        // MIDDLE CLICK or CMD+LEFTCLICK - new tab
        var popup = $window.open("about:blank", "_blank"); 
        // the about:blank is to please Chrome, and _blank to please Firefox
      }

      $http.get('/some/path')
        .success(function(data){
          //check that it's a good URL, then route to it
          //$location.path(data);
          if (event.which === 1 && !event.metaKey && !event.ctrlKey) {
            // LEFTCLICK - same window
            $window.location.href = data;
          } else if (event.which === 2 || (event.which ===1 && (event.metaKey || event.ctrlKey))) {
            // MIDDLE CLICK or CMD+LEFTCLICK - new tab
            popup.location = data;
          }
        })
        .error(function(data, status, headers, config) {
          console.error('Failed to get URL: ' + status);
        });
      console.log('Fetch request sent, awaiting response...');
    };
  });
Run Code Online (Sandbox Code Playgroud)

编辑

更新为支持外部链接,中间点击现在将在新窗口中打开

更新以支持:

  • CMD +单击并按CTRL +单击以作为鼠标中键单击.
  • 放入新标签,而不是新窗口.