Невозможно управлять содержимым DOM приложения Ionic Android

Question

angular.module("app.categories").controller("CategoryController", t), t.$inject = ["$scope", "$stateParams", "$state", "categoryManager"] 

angular.module("app", ["ionic", ["app.home","app.products",...]); 
angular.module("app").run(["$templateCache", function(t) { 
t.put("app/scripts/about/about.html", '<ion- view>.....'),t.put("app/scripts/home/block.html", '<div>....')}]); //this is how the page content is loaded 

Я запускаю это приложение в браузере, используя Ionic («Ионная подача» в корневом каталоге). Я не могу запустить базовый JavaScript на странице, содержимое которой было загружено следующим образом. После тайм-аута, если DOMContentLoaded называется элемент подобран, но выполнив следующую только манипулировали идентификатор элемента, а не HTML или значение

setTimeout(function(){ 
     document.addEventListener('DOMContentLoaded',function(){ 
      document.getElementById('customBox').id = 'changed'; //to test, id changes 
      document.getElementById('customBox').innerHtml = '<h1> test </h1>'; //does not change anything, no errors in console 
      document.getElementById('customBox').text= '<h1> test </h1>'; //does not change anything, no errors in console 
      document.getElementById('customBox').html= '<h1> test </h1>'; //does not change anything, no errors in console 

}); 

},2000); 

Есть что-нибудь, что это предотвращение каких-либо изменений в содержание страницы в браузер? Как внести изменения в содержимое DOM с помощью простого JavaScript для этого приложения для Ionic Android?

Answer 1

Не пытайтесь манипулировать html углового приложения напрямую, если вы не написали пользовательскую директиву. Если вы хотите изменить innerHtml, используйте ng-bind-html на div и просто измените область действия.

Кроме того, не используйте setTimeout в угловом приложении, всегда используйте службы $timeout или $interval.

Так что ваш код, где-то внутри контроллера, должен просто выглядеть следующим образом:

$scope.testContent = '<h1> tet </h1>'; 

и HTML:

<div id='customBox' ng-bind-html="testContent"></div> 

Хотя главная причина, что ваш код не работает в том, что, как вскоре, когда вы изменили идентификатор на «измененный», все остальные вызовы getElementById не найдут div.

Answer 2

Попробуйте использовать angular.element как этого

angular.element(document.getElementById('customBox')).innerHtml = '<h1> test </h1>'; 

Посетите ссылку на деталь https://docs.angularjs.org/api/ng/function/angular.element