AngularJS 动态元素 ID 和 DOM 访问

Posted

技术标签:

【中文标题】AngularJS 动态元素 ID 和 DOM 访问【英文标题】:AngularJS dynamic element ID and DOM access 【发布时间】:2019-04-04 17:14:31 【问题描述】:

在我的代码中,我创建了一个具有动态生成 ID 的元素。之后,我试图从我的控制器中填充相同的元素,但对于控制器来说,该元素似乎不存在。

以下是代码的相关部分:

(html)

<div class="pd_graph" ng-controller="pd.controller" id='cont- my_context '>
</div>

(AngulaJS 控制器)

$scope.my_context = "test";
$('#cont-'+ $scope.my_context).html("<h2>Hello world</h2>");

我的预期结果是这样的:

<div class="pd_graph" ng-controller="pd.controller" id='cont-test'> 
<h2>Hello world</h2>
</div>

有没有办法做到这一点?到目前为止,当我尝试访问 $('#cont-'+ $scope.my_context) 它根本不存在。

提前谢谢你!

【问题讨论】:

尝试使用$timeout 包装您的jQuery 代码。在 AngularJS 中使用 jQuery 进行 DOM 操作也是一个坏主意(没有充分的理由)。您应该使用具有 jQLite 的指令 设置变量后 DOM 不会立即呈现,请使用超时。 我已经尝试过 $timeout 选项。由于某种原因,它只是忽略了延迟并立即执行该功能。将调查指令的事情...... @AlekseySolovey 我做了,但没有帮助:( 我认为你应该用 Angular 创建这个元素,而不是 jQuery 【参考方案1】:

jQuery 选择器需要为id 属性使用#。您的 id 已经以它开头 - #cont-test。建议你改成cont-test. 然后将任何 jQuery 代码包装在 $timeout 函数中,否则 id 将不会被渲染(jQuery 不是 AngularJS 摘要循环的一部分)。

这是一个演示:

var app = angular.module('myApp', []);
app.controller('ctrl', function($scope, $timeout) 
  $scope.my_context = "test";
  $timeout(function() 
    $('#cont-' + $scope.my_context).html("<h2>Hello world</h2>");
  );
);
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp">

  <div class="pd_graph" ng-controller="ctrl">
    <div id="cont-my_context">replace me</div>
  </div>

</div>

【讨论】:

您对 ID 上的“#”是正确的。我已经更正了我的问题的代码。

以上是关于AngularJS 动态元素 ID 和 DOM 访问的主要内容,如果未能解决你的问题,请参考以下文章

如何获取html元素id,通过angularjs

AngularJs动态添加元素和删除元素

从DOM数据元素动态构建选择语句[重复]

为啥 angular.js 在添加动态元素时不够聪明,无法编译 DOM?

其他获取 DOM 元素的方法

如何将 angularJs 用于动态创建的 HTML(未加载到 DOM)