javascript - 在特定 元素下插入 html ng-repeat - AngularJS

Question

我已经开始从pluralsight学习AngularJS。根据教程，我成功地使用路由和基本指令编写了一个 Github 用户列表 APP。

<div ng-controller="RepositoryController">
<h3 ng-hide="!repoDetails">Repository owned:</h3>

<div ng-repeat="repo in repoDetails">    

    <img ng-src="{{contributorsList == undefined && './Images/collapsed.jpg' || './Images/expanded.jpg'}}" ng-click="listContributors(repo.name)" />{{repo.name}}
    {{contributorsList == undefined}}
    <div id={{repo.name}} style="padding-left: 55px">            
    </div>
</div>

请看http://plnkr.co/edit/ztArGBEmPeoNMk5khkDi

正如您从应用程序中看到的，第一个主页列出了 Github 的用户，单击表中的个人资料 URL 后，它会详细列出用户信息，在其底部，它会列出所拥有的存储库。

您可以单击每个存储库箭头图标，该图标将展开以显示该存储库的贡献者。

如您所见，repositoryController.js 有一段代码，它将带有 ng-repeat 指令的 UL-LI 标记插入到 html/view 中。原因是，所有存储库贡献者列表部分的模板都是相同的。

问题:

1. 展开存储库列表下的一个箭头图标后，所有其他 li 元素内容/子元素也会显示相同的内容。那么如何只为特定的 li 元素注入(inject)呢？并且不打扰他人。

2. 如果单击一个元素，箭头图标也会生效，其余元素会发生变化，因为 ng-src 有条件检查。那么如何在用户点击时更改特定 li 元素的图标，而不是每次都从 Controller 发送。

欢迎任何其他代码改进和建议。

请提供您对问题的详细解释和建议。帮助我更好地理解和学习。

谢谢

Answer 1

如果您发现自己需要使用 $compile 或在 Angular 应用程序中进行大量 DOM 操作，则表明您走错了方向。下面的示例说明了如何在不进行任何手动 DOM 操作或 HTML 字符串解析的情况下执行此操作。

http://plnkr.co/edit/DHelPTU7gqPPEQzo41fo?p=preview

HTML

<div ng-repeat="repo in repoDetails">    

    <img 
      ng-show="!repo.showContributors"
      src="http://cdn.shopify.com/s/files/1/0434/3957/t/32/assets/icon-arrow-right-small.png" 
      ng-click="listContributors(repo)" />
    <img 
      ng-show="repo.showContributors"
      src="http://cdn.shopify.com/s/files/1/0434/3957/t/26/assets/icon-arrow-down-small.png" 
      ng-click="repo.showContributors = false" />
    {{repo.name}}
    {{contributorsList == undefined}}
    <div id={{repo.name}} style="padding-left: 55px">
      <ul ng-if="repo.showContributors">
        <li ng-repeat='contributor in repo.contributors'>{{contributor.login}}</li>
      </ul>
    </div>
</div>

JS

$scope.listContributors = function (repo) {
  repo.showContributors = true;
  loadContributors(repo.name).then(function(response) {
    repo.contributors = response.data;
  });
}

var loadContributors = function (repoName) {
    return $http.get("https://api.github.com/repos/" + $routeParams.username + "/" + repoName + "/contributors");
};