2017-05-16 64 views
0

我有一个在angular-js中开发的单页面应用程序,我需要在新网址下打开一个打印页面。目前,printtext.html加载它的内容,但在index.html的内部。我想要的是只加载printtext.html的内容,而不需要index.html中的任何内容。基本上,如果我点击我的index.html中的链接,我只想在浏览器中看到文本printtext。而不是像Some headertext这是事情的情况。这是可能的还是我打破SPA规则?我的主要目标是创建一个PrintSite,在那里我只看到没有任何页眉或页脚信息的内容。还是应该用户隐藏呢? 我不包括这里的逻辑,但如果需要将提供。以角度打开一个新网站

的index.html

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <title>Myapp</title> 
    <script src="libs/js/angular.js"></script> 
    <script src="libs/js/angular-route.js"></script> 
    <script src="js/app.js"></script> 
</head> 

    <body> 
    <h1> Some headertext </h1> 
    <ng-view></ng-view>  
    </body> 

app.js

var app = angular.module('myapp', ['ngRoute']) 
    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider 
      .when('/text', { 
       templateUrl: "template/text.html" 
      }) 
      .when('/print', { //actually the parameter is /print/:object but i left the logic out here 
       templateUrl: "Print/printtext.html" 
      }) 
    }]) 

text.html

<p> Some text </p> 

<a ng-href="#!/print">Print </a> <!-- The right link would be something like #!/print/marc --> 

printtext.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html ng-app="myapp"> 
<head><title> 
    Printview 
</title> 

    <script src="../libs/js/angular.js"></script> 
    <script src="../libs/js/angular-route.js"></script> 

    <script src="../js/app.js"></script> 
<body> 

     <p>printtext</p> 

</body> 
</html> 

回答

1

您直接在您的锚标记中使用target = "_blank"

<p> Some text </p> 

    <a ng-href="#!/print" target="_blank">Print </a> <!-- The right link would be something like #!/print/marc --> 

否则,您可以创建一个角度动态自定义指令。自定义指令一般用于根据动态条件设置目标。

<p> Some text </p> 

<a ng-href="#!/print" ng-attr-target="_blank">Print </a> <!-- The right link would be something like #!/print/marc --> 

<a ng-attr-target="_blank"> 
    ... 
</a> 

NG-ATTR-XYZ,您可以动态创建@xyz,如果值是不确定的,不会创建任何属性。

+0

对我来说,它打开了一个新的网站,但结果相同。但是我会检查我是否可以用ng-attr-target属性做一些事情。 – member2

+0

'在新的url上加载printsite?'你想在新标签上或者在同一页面下载入printsite页面。 – eigenharsha

+0

我更新了我的问题,希望它现在可以理解。 – member2