Question

在我的代码上，我创建了一个具有动态生成的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）时，它根本不存在。

提前谢谢！

Answer 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>

AngularJS动态元素ID和DOM访问

1 个答案: