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); 

は中ページのコンテンツに変更を防止だものはありますブラウザ？このIonic Androidアプリで簡単なJavaScriptを使用してDOMコンテンツを変更するにはどうすればよいですか？

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> 

あなたのコードが動作しない主な理由は、などということですが、間もなくidを "変更"に変更したときは、他のすべてのgetElementByIdコールはdivを見つけられません。

Answer 2

この

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

ログイン詳細https://docs.angularjs.org/api/ng/function/angular.element