無法操作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