Question

與AngularJS工作，我跨惱人的問題來了。我正嘗試使用1個鏈接打開兩個獨立的iframe中的鏈接。一切工作正常，除了實際的鏈接，因爲我正在使用一個onclick JS事件試圖把這些鏈接放在適當的框架。然而，它不起作用，並且在我的角色腳本中放置一個元素會破壞鏈接。

這是我有：

onclick="frame1.location.href='http://www.twitch.tv/{{user.username}}/chat'; frame2.location.href='http://twitch.tv/{{user.username}}/embed';" 

它不能識別{{user.username}}元素時，他們都在裏面了 '的onclick'。

該做的工作，當我有這個頁面用PHP編寫的（所以我知道它的工作原理），但就因爲它是太多的服務器負載這條路線。這是我需要解決的最後一點，然後我的抽動頁面將完成。

如何得到這個工作，我怎麼需要它有什麼想法？

抽搐Boxs腳本：

<main ng-app="TwitchApi"> 
<section ng-controller="MainCtrl"> 
    <table width="957" border="0" align="center" cellpadding="5" cellspacing="5"> 
     <tr> 
      <td width="620"> 
       <iframe name="tbox" src="includes/first-load.php" frameborder='0' scrolling='auto' height='450' width='620'></iframe> 
      </td> 
      <td width="302" valign="top"> 
       <iframe name="cbox" src="includes/chat-load.php" scrolling='no' frameborder='0' scrolling='auto' height='450' width='300'></iframe> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <div class="menu-box" align="left"> 
        <span class="twitch-box"> 
         <header> 
          <ul id="mainMenu"> 
           <li data-display="allUsers" class="activeMenu">All</li> 
           <li data-display="onlineUsers">Online</li> 
           <li data-display="offlineUsers">Offline</li> 
           <li><a id="refresh" href="#"><img src="images/refresh.png" height=20 width=20></a></li> 
          </ul> 
         </header> 
       <div id="twitchreload"> 
        <ul id="grnstaff"> 
         <a href="#" ng-click="changeSrc('cbox','http://www.twitch.tv/{{username}}/chat');changeSrc('tbox','http://www.twitch.tv/{{username}}/embed');" ng-repeat="user in profile | orderBy:random"> 
         <li id="oncheck-{{user.username}}" ng-style="{ 'background-color' : (user.streaming) ? '#ccffcc' : '#EAEAEA' }"> 
          <img ng-src="{{user.logo}}" err-src="images/twitch-default.jpg" class="pic"/> 
          <span class="name">{{user.name}}</span> 
          <span class="status"><i class="{{user.status}}"></i></span> 
          <span class="title">{{user.streamTitle}} <i class="{{user.tv}}"></i> {{user.viewers}}</span> 
         </li> 
         </a> 
        </ul> 
       </div> 
        </span> 
       </div> 
      </td> 
     </tr> 
</section> 
</main> 

Answer 1

我沒有所有的代碼，但我相信這是你所需要的。

實時預覽：http://codepen.io/larryjoelane/pen/LGdyLN

HTML（你將需要使用NG單擊代替的onclick具有角）：

<div ng-app="app" ng-controller="user"> 

    <p ng-click="changeSrc('frame1','http://www.twitch.tv/{{username}}/chat');changeSrc('frame2','http://www.twitch.tv/{{username}}/embed');"> 
    Click Me! 
    </p> 

    <iframe id="frame1" src=""></iframe> 

    <iframe id="frame2" src=""></iframe> 



</div> 

角/ JavaScript的：

angular.module("app",[]).controller('user', ['$scope', function($scope){ 

//the user name to bind to the url 
$scope.username = "Larry"; 

//function to change the src attribute of the iframe 
$scope.changeSrc = function(id,url){ 

var frame = document.getElementById(id); 

    frame.src = url; 

}; 


}]);