是否可以使用 Angular 获取元素的内部 HTML？答案

【问题标题】：Is it possible to get the inner HTML of element using Angular?是否可以使用 Angular 获取元素的内部 HTML？
【发布时间】：2015-05-15 04:41:18
【问题描述】：

这是一个虚拟演示 http://play.ionic.io/app/580ebc698c2c 。基本上我创建了一个充满“名称”的列表，我需要获取所选元素的文本。

但是，当我单击列表中的某个项目时，我会为所有用户获得相同的“innerHTML”。

我的方法是否可行？或者有没有更好的方法来使用 Angular？

谢谢

我的代码：

Index.html（正文）

 <body ng-app="app" ng-controller="MyCtrl">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <a class="item" ng-repeat="name in names" id="userId" ng-click="click()">
        {{name.name}}
      </a>
    </div>

  </ion-content>
</ion-pane>

app.js

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

.controller('MyCtrl', function ($scope) {
  $scope.names = [
    {name: "Phillip"},
    {name: "Jane"},
    {name: "Marcos"},
    {name: "Thomas"}
  ]

  $scope.click = function () {
    var selectedUser = document.getElementById("userId").innerHTML;
    alert("You selected " + selectedUser);
  }

})

更新

我的数据的实际外观。

<ion-content>
    <div class="list">
        <a class="item" 
            ng-repeat="friend in friends" 
            ng-click="selectedUser(friend)">
            {{friend._serverData.following}}
        </a>
    </div>
</ion-content>

形成这个列表我试图在单击（选择）时以某种方式获取项目的“文本”。

我的 JS

$scope.selectedUser = function (friend) {
    alert(friend.friend);
}

【问题讨论】：

您还有什么问题吗？我看得出你不接受我的回答？
是的，它适用于我的演示，但不适用于我的实际项目。我得到一个“未定义”。
你能提供更多关于它现在失败的细节吗？
在我的演示中，“名称”是在我的 js 中定义的。但在我的项目中，我从后端调用我的数据。所以对于 "alert("You selected : " + name.name);"第二个“名称”未定义。我可以通过控制台查看数据。
但是对于我在这里提出的问题，您的解决方案是正确的。

标签： javascript angularjs ionic-framework ionic

【解决方案1】：

我看了你的代码，发现需要修改如下

HTML

<a class="item" ng-repeat="name in names" ng-click="click(name)">
  {{name.name}}
</a>

$scope.click = function (name) {
    alert("You selected : " + name.name);
}

这里是更正

锚标记有id，它与数组中的每个元素都重复，这是错误的。 ID 在整个 DOM 中应该是唯一的。
您无需访问 HTML 元素即可获取值。在您的情况下，ng-click 方法可以传递 name 对象的引用。
只需在 JS 函数中访问 name 对象。

【讨论】：

【解决方案2】：

将 $index 作为参数传递给 click() 函数，如下所示：

<a class="item" ng-repeat="name in names" id="userId" ng-click="click($index)">
        {{name.name}}
</a>

然后在click(index)函数中使用索引确定名称：

$scope.click = function (index) {
    var selectedUser = $scope.names[index].name;
    alert("You selected " + selectedUser);
}

【讨论】：

【解决方案3】：

第一个问题，您设置了一个 id userId，它对 angularJS 创建的每个项目重复。 id 必须是唯一的，这就是为什么你得到“Philip”，javascript 发送代码中第一个元素的 innerHTML，id="userId"。

另外，如果你使用 Angular，你可以避免像 getElementByID 这样的 vanilla javascript，你可以在 angular click 中传递参数“name”

HTML

<div class="list">
          <a class="item" ng-repeat="name in names" id="userId" ng-click="click(name.name)">
            {{name.name}}
          </a>
        </div>

 $scope.click = function (name) {
        alert("You selected " + name);
      }

Demo

【讨论】：

【解决方案4】：

以上任何一个答案都很好。我只是建议你不要在同一个元素上绑定点击和重复等。它导致了这种混乱。此外，您可能希望中继器中每个“名称”（项目）的功能更多。

将转发器的输出推送到指令中。

<ul>
  <li ng-repeat="item in items">
     <item-directive data="item" />
  </li>
</ul>

然后是item-directive模板：

 <div>
   <a ng-click="clickMe()">{{data.name}}</a>
 </div>

指令本身（针对那个项目）会响应它的点击事件。

angular('appName').directive('itemDirective',function(){
            return{
            restrict:'E',
            replace:true,
            templateUrl:'item.view.html',
            scope:{
                data:'='
            },
            controller:function($scope,$log){
                 $scope.clickMe=function(){
                    $log.debug('clicked!', $scope.data.name);
                 }
            }
        };
});

现在您的每个项目都被很好地隔离了，布局更好，更有意义的是什么绑定到什么。

编辑：只是为了补充一点。您正在考虑获取“DOM”，而不是考虑“数据”的 Angular 方式。 dom 与 Angular 中的数据“绑定”并响应数据的变化（如果绑定正确！），当您在 Angular 中工作时，请始终尝试记住这一点。如果您正在考虑有关 DOM 的任何事情，那么您可能走错了方向。

【讨论】：