javascript - 如何将链接添加到这个 Angular 演示中？

Question

所以我一直在玩这个 Angular 演示，并为它创建了一个代码笔。

http://codepen.io/H0BB5/pen/JoBYxX

我试图将底部工作表中显示的每个列表/网格元素都变成链接。本质上，我想将它们包装在标签中。

我通过 javascript 提取了 html，只是为了 codepen 上的工作版本。我看到它使用 Ng-repeat 循环遍历整个范围内的元素。我怎样才能将这些中的每一个变成它们自己单独的链接？

我确信这是一个简单的解决方案，但我很难过。

谢谢大家的帮助

<md-bottom-sheet class="md-grid">
  <md-list>
    <md-item ng-repeat="item in items">
      <md-button class="md-grid-item-content" aria-label="{{item.name}}" ng-click="listItemClick($index)">
        <div class="md-icon-container">
          <md-inline-grid-icon icon="{{item.icon}}"></md-inline-grid-icon>
        </div>
        <p class="md-grid-text"> {{ item.name }} </p>
      </md-button>
    </md-item>
  </md-list>
</md-bottom-sheet>

Angular

angular.module('bottomSheetDemo1', ['ngMaterial'])
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet){
  $scope.alert = '';

  $scope.showGridBottomSheet = function($event) {
    $scope.alert = '';  
    $mdBottomSheet.show({
      template: gridTemplate,
      controller: 'GridBottomSheetCtrl',
      targetEvent: $event
    }).then(function(clickedItem) {
      $scope.alert = clickedItem.name + ' clicked!';
    });
  };
})

.controller('GridBottomSheetCtrl', function($scope, $mdBottomSheet) {
  $scope.items = [
    { name: 'Hangout', icon: 'hangout' },
    { name: 'Mail', icon: 'mail' },
    { name: 'Message', icon: 'message' },
    { name: 'Copy', icon: 'copy' },
    { name: 'Facebook', icon: 'facebook' },
    { name: 'Twitter', icon: 'twitter' },
  ];
  $scope.listItemClick = function($index) {
    var clickedItem = $scope.items[$index];
    $mdBottomSheet.hide(clickedItem);
  };
});

编辑*忘了补充一点，我正在尝试使用图像而不是图标，但只是在 codepen 中放入一个 url 链接也不会显示它。

Answer 1

因此，如果我对您的理解正确，而不是让按钮执行它们现在所做的事情(它们每个调用相同的函数并在单击时传递它们的索引)，您会希望按钮成为具有“href”属性的 anchor 标记你的选择。是吗？

如果是这样，您有多种选择。我不会深入探讨 ngRoute 选项，因为它更深入一些，但如果您的链接要指向 Angular 应用程序的另一部分，则需要对其进行研究。 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

最简单的方法是将 URL 分配给每个“元素”对象。

{ name: 'Hangout', icon: 'hangout', urlPath: 'boobs.html' },

---

<a class="md-grid-item-content" aria-label="{{item.name}}" 
  ng-href="www.whatever.com/{{item.urlPath}}">