AngularJS динамический элемент ID и доступ к DOM

Question

В своем коде я создаю элемент с динамически генерируемым идентификатором. После этого из моего контроллера я пытаюсь заполнить тот же элемент, но, похоже, контроллеру этот элемент не существует.

Вот соответствующие части кода:

(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 атрибутов. Ваш идентификатор уже начинается с него - #cont-test. Я предлагаю вам изменить его на cont-test.
Затем оберните любой код jQuery в функцию $timeout, иначе идентификатор еще не будет отображен (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>