为什么innerHTML在angularjs中返回未定义答案

【问题标题】：Why does innerHTML returns undefined in angularjs为什么innerHTML在angularjs中返回未定义
【发布时间】：2015-04-06 13:43:40
【问题描述】：

innerHTML 在单击 <p></p> 标记时返回未定义，但我期待它的内部 html。猜猜为什么？

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

【问题讨论】：

请在问题中提供相关代码，而不是在外部站点中。相应地编辑问题。

标签： javascript angularjs html angularjs-scope

【解决方案1】：

您需要$event.target 或$event.currentTarget。

我希望你应该使用$event.currentTarget，因为它会在你点击的地方为你提供更精确的元素。

代码

$scope.abc = function($event){
  //more precise element tracking will track sub element too using $event.currentTarget
  alert( $event.currentTarget.innerHTML || $event.srcElement.innerHTML); 
  alert($event.target.innerHTML); //element tracking
}

Working Plunkr

更多信息请参考this answer。

【讨论】：

【解决方案2】：

因为 Angular 传递 $scope 对象，而不是 DOM 元素。因为$scope 对象没有innerHtml，所以你得到undefined。

您可以将模型分配给输入或文本区域，然后将此模型传递给您的函数。这是一个 plunker：http://plnkr.co/edit/VjFXacXJMa0PpS364wOb 或者，如果你想坚持从控制器玩 DOM，这违背了 Angular 的本质，你可以使用$event.target。

【讨论】：

【解决方案3】：

你可以通过angular的$event

<p ng-click="abc($event)">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, nemo, numquam, incidunt similique quisquam dolor blanditiis quis veniam at laudantium quibusdam beatae ad ea voluptates impedit molestiae cum modi quam!
</p>

并获取innerHtml

$scope.abc = function(e) {
    alert(e.target.innerHTML);
}

Plunker

【讨论】：

【解决方案4】：

你可以传递$event 并获取$event.target，这是被点击的dom 元素

  $scope.abc = function($event){
    alert($event.target.innerHTML);
  }

【讨论】：