无法操作Ionic Android应用程序的DOM内容

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（根目录中的'Ionic serve'）运行此应用程序。我无法在已加载内容的页面上运行基本JavaScript。如果DOMContentLoaded超时被称为后，该元素回升，但运行以下仅操纵元素的ID，而不是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); 

有没有什么问题，导致任何改变网页内容中浏览器吗？如何使用简单的JavaScript为此Ionic Android应用程序对DOM内容进行更改？

Answer 1

除非您编写了自定义指令，否则不要尝试直接操作角度应用程序的html。如果您想更改innerHtml，请在div上使用ng-bind-html，然后修改范围。

此外，请勿在角度应用中使用setTimeout，而应始终使用$timeout或$interval服务。

所以你的代码，某处的控制器内，应该只是看起来像这样：

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

和HTML：

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

虽然你的代码不起作用的主要原因是，作为一旦您将ID更改为“更改”，所有其他getElementById调用将不会找到该div。

Answer 2

尝试使用angular.element这样

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

访问此链接查看详细https://docs.angularjs.org/api/ng/function/angular.element