Question

所以我需要一些关于anjularJS的帮助（请原谅我学习），而且在来到这里之前我一直在研究，但无论如何，我遇到了一个改变链接和文本的问题点击列表中的内容。

我有一个我正在处理的抽搐页面，在页面底部，我有一个指向流媒体提示页面的链接，因为观众想要给他们正在观看的流光小费。

我也希望文本也能改变，以显示他们当前正在观看的流光。所以基本上，当他们点击列表中的流光时，链接和文本将会改变。

HTML：

    <main ng-app="TwitchApi">
<section ng-controller="MainCtrl">
    <table width="957" border="0" align="center" cellpadding="5" cellspacing="5">
      <tr>
<td rowspan="3" valign="top"><div class="menu-box-header" align="left">
            <header>
                            <ul id="mainMenu">
                                <li data-display="allUsers" class="activeMenu">All</li>
                                <li data-display="onlineUsers">Online</li>
                                <li data-display="offlineUsers">Offline</li>
                            </ul><div id="searchMenu"><i id="searchIcon" class="fa fa-search"></i>
                            <input type="text" ng-model="searchText" placeholder="Search Streamers" id="searchBar"/>
                        </div>
                        </header> 
                </div>
                <div class="menu-box" align="left">


                    <ul id="grnstaff">
                        <li ng-repeat="user in profile | filter:searchText" ng-click="changeSrc('cbox','http://www.twitch.tv/' + user.username +'/chat');changeSrc('tbox','http://www.twitch.tv/' + user.username +'/embed');changeSrc('tip','http://www.twitchalerts.com/tip/' + 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> 
                    </ul> 

                </div></td>
<td><iframe id="tbox" src="includes/first-load.php" frameborder='0' scrolling='auto' height='450' width='620'></iframe></td>

  </tr>
  <tr>
    <td><iframe id="cbox" src="includes/chat-load.php" scrolling='no' frameborder='0' scrolling='auto' height='300' width='620'></iframe></td>
  </tr>
    <tr>
    <td colspan="2" ><div class="menu-box-header" style="width:620px;height: 75px;"><center><br><a href="https://www.twitchalerts.com/tip/' + user.username +'"class="btn" target="_blank">Tip This Streamer!</a><br><br>Selected Streamer: STREAMER NAME
</center>
</div>
</td>
  </tr>
    </section>
    </main>

我放在这里的JS部分：http://pastebin.com/WraGSder

我希望这能解释我想要做的事情。理想情况下，我还想做一个URL解析来检查链接的URL，以确保它们有一个小费页面，如果他们没有，那么它会被重定向到本地404页面

我在这里试过这个指南： https://docs.angularjs.org/api/ng/directive/ngHref

但我无法为我工作，我希望它如何工作，所以我来到这里，希望有人能在这里帮助我。

谢谢！

编辑（按以下方式尝试）： 点击事件添加到最后：

ng-click="changeSrc('cbox','http://www.twitch.tv/' + user.username +'/chat');changeSrc('tbox','http://www.twitch.tv/' + user.username +'/embed');vm.changeToTipLink(link);"

增加了功能：

// Test function for text/link changing
  function TwitchTipLinkCtrl() {
var vm = $scope.allUsers;

vm.link = obj.username;
vm.changeToTipLink = function(link) {
  vm.link = link;
};
  };
// END

链接：

<a href="https://www.twitchalerts.com/tip/{{vm.link}}"class="btn" target="_blank"><b>Tip This Streamer!</b></a><br><br>Selected Streamer: {{vm.link}}</a>

编辑2：还试过这个，这确实会改变文本，但只重新进行第一次点击：

$scope.text = 'Please Select A Streamer!';
$scope.myText = function() {
  $scope.text = obj.name;
}

Answer 1

我创造了一个我认为你的意思here。这是沿着正确的方向吗？（这使用角度1.5 beta 2）

angular.module('app', []);

(function() {
  angular
    .module('app')
    .component('exampleLink', {
      bindings: {},
      controller: 'ExampleLinkCtrl',
      controllerAs: 'vm',
      templateUrl: 'example.html'
    });
}());

(function() {
  angular
    .module('app')
    .controller('ExampleLinkCtrl',ExampleLinkCtrl);

  function ExampleLinkCtrl() {
    var vm = this;

    vm.links = [
      {
        url: 'http://www.google.co.uk',
        text: 'Google' 
      },
      {
        url: 'http://www.bing.co.uk',
        text: 'Bing' 
      },
      {
        url: 'https://github.com/',
        text: 'GitHub' 
      },
    ];
    vm.link = vm.links[0];

    vm.changeToRandomLink = function(link) {
      vm.link = link;
    };
  }
}());

example.html看起来像这样：

<p ng-repeat="link in vm.links track by $index" ng-click="vm.changeToRandomLink(link)">
  {{$index+1}} - {{link.text}}
</p>

<hr />
<a href="{{vm.link.url}}">Go to {{vm.link.text}}</a>

因此，当您从列表中选择某些内容时，它将使用文本和链接对象中的URL更新链接。

修改

我认为你不了解angularjs的这种编码方式。我会在这里解释一下abit。当您在指令或控制器的定义中使用controllerAs时，您基本上会说控制器将在模板中被引用为＆＃34; vm＆＃34;。

这意味着可以通过vm.myFunction（）调用$ scope上的任何内容（或者在这种情况下为vm，但我会得到它）。在你的情况下，你试图调用一个没有正确附加到vm的功能。考虑：

vm应该是这样的：

var vm = this; // I.e. refer to the controller

不应该 var vm = $ scope.users;

附加一个功能（你有正确的）

vm.changeToTipLink = function(link) { vm.link = link; };

现在你可以在你的HTML中调用它。请注意，HTML模板现在要求将该控制器中的所有函数附加到vm。你不能这样做：

function changeSrc(name, url, etc) {}

本身，因为它没有附加到vm。如果你想打电话给你，你需要这样的东西：

vm.changeSrc = changeSrc; // Function definition function changeSrc(name, url, etc) {}

并再次通过ng-click="vm.changeSrc()"
在HTML中调用它
修改

将myText功能更改为：

// Test function for text/link changing $scope.text = 'Please Select A Streamer!'; $scope.myText = function(user) { $scope.text = user.name; };

和html到此：

ng-click="myText(user);change...."

另一方面说明：

这一切都可以在AngularJS中完成 - 你为什么这么多使用JQuery？

Jquery不应该在控制器中使用

AngularJS附带精简版JQuery，通常用于dom操作指令的链接部分

此外 - 您正在注入$ http但尚未使用它并正在使用AJAX （我假设 - $ .getJSON）获取东西。这一切都可以在角度上完成。

您是否正在尝试将其重写为Angular？我希望如此

改变链接＆amp;基于Click的文本 - AngularJS

1 个答案: