在按钮单击上打开另一个选项卡并重定向到另一个html

时间:2018-04-02 05:51:40

标签: html angularjs mean-stack

我知道有类似的问题,但答案和建议对我不起作用,我无法理解错误。

点击按钮,我想在新标签页中加载另一个HTML。当我尝试“www.google.com”时,我能够这样做。但是当我尝试加载我拥有的HTML时,我无法这样做。

以下是相关的HTML代码:

<div id="button">
    <a href="www.google.com"
       target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
    <form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
          target="_blank">
        <input type="submit"
               value="Go to Google" />
    </form><!-- THIS Fails -->
    <input type=button
           onClick="location.href='tree_custom.html'"
           value='click here'
           target="_blank"><!-- THIS Fails -->
</div>

我得到的错误就是这个,我无法调试:

  

Error: Not Found
        at /Users/tarun/Work/marchDemo/app.js:41:13
        at Layer.handle [as handle_request] (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/layer.js:95:5)
        at trim_prefix (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:312:13)
        at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:280:7
        at Function.process_params (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:330:12)
        at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:271:10)
        at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:618:15
        at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:256:14)
        at Function.handle (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:176:3)
        at router (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:46:12)

2 个答案:

答案 0 :(得分:1)

如果您使用的是Angular,我建议您使用ng-click。然后,您可以将控制器中定义的方法绑定到ng-click。当用户点击您的按钮时,会打开包含所需网址的新标签页。

body.html
<div ng-controller="exampleCtrl as ctrl">
    <button ng-click="ctrl.directToGoogle()"></button>
</div>

index.js
angular.module('exampleModule', [])
       .controller('exampleCtrl', ['$scope', '$window', 
             function ($scope, $window) {
                  $scope.directToGoogle = function () {
                        $window.open('https://www.google.com', '_blank')
                  }])

这是一个简单而有人工作的例子,说明如何将方法绑定到ng-click并执行您之前在问题中描述的内容。

答案 1 :(得分:1)

您可以将onclick="window.open('tree_custom.html')"target="_blank"一起使用,而不是使用location.href

<div id="button">
          <a href="www.google.com"
             target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
          <form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
                target="_blank">
              <input type="submit"
                     value="Go to Google" />
          </form><!-- THIS works -->
          <input type=button  onclick="window.open('tree_custom.html')"
                 value='click here'
                 target="_blank"><!-- THIS WORKS -->
      </div>

检查工作人员:https://plnkr.co/edit/PQk5al?p=preview