javascript - JS iframe1.location.href 中的 AngularJS 元素

Question

使用 AngularJS 时，我遇到了一个恼人的问题。我正在尝试使用 1 个链接在两个单独的 iframe 中打开链接。除了实际链接之外，一切都按预期工作正常，因为我正在使用 onclick JS 事件来尝试将这些链接放入正确的框架中。但是它不起作用，并且将我的 Angular 脚本中的元素放入其中会破坏链接。

这就是我所拥有的:

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

当 {{user.username}} 元素位于“onclick”内部时，它无法识别它们。

当我用 php 编写此页面时，这确实有效(所以我知道它有效)，但由于服务器负载太多，所以采用了这条路线。这是我需要解决的最后一点，然后我的抽搐页面就会完成。

关于如何让它按照我需要的方式工作有什么想法吗？

Twitch Box 脚本:

    <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-click 而不是带 Angular 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>

Angular/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;

 };


}]);