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}}元素位于＆＃39; onclick＆＃39;内时，它无法识别它们。

当我用php编写这个页面时这确实有效（所以我知道它有效），但是由于它在服务器负载上太多而走了这条路线。这是我需要解决的最后一点，然后我的抽搐页面将完成。

关于如何使我的工作方式的任何想法？

Twitch 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-click而不是onclick with angular）：

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

 };


}]);

JS iframe1.location.href中的AngularJS元素

1 个答案: