onsenui не может изменить содержание

Question

Я использую онсэн пользовательского интерфейса версии 1, а затем https://onsen.io/v1/guide.html внести изменения в DOM

В этом разделе, чтобы быть точным

// Add another Onsen UI element 
var content = document.getElementById("my-content"); 
content.innerHTML="<ons-button>Another Button</ons-button>"; 
ons.compile(content); 

Проблема ничего изменить на странице.

Если я сбрасываю «содержимое» или выгружаю элемент HTML, он показывает недавно отредактированную версию на консоли браузера. но на странице все еще старый.

Объект ons создан, метод компиляции может быть вызван, пробовал различные элементы HTML.

Answer 1

Либо вы делаете что-то неправильно, либо это проблема с угловым обновлением.

Для первого сценария проще, если вы предоставите код, чтобы мы могли видеть проблему. В настоящее время код, который вы упоминаете, отлично работает для меня here.

Для второго сценария на самом деле третья строка ons.compile(content); должна устранить эту проблему imo, это может быть проблема с версией, или есть какой-то контекст, который мне не хватает.

Если вы делаете что-то угловатое, вы также должны показать, где вы вызываете эти 3 строки. Для работы он должен быть вызван из чего-то вроде события ng- (например, ng-click).

JS:

app.controller('yourControllerName', function($scope) { 
    $scope.addButton = function() { 
     var content = document.getElementById("my-content"); 
     content.innerHTML="<ons-button>Another Button</ons-button>"; 
     ons.compile(content); 
    } 
}); 

HTML:

<ons-button ng-click="addButton()">Add another button</ons-button> 

Наконец, если вы не в состоянии сделать его работу вы можете сделать что-то вроде

app.controller('yourControllerName', function($scope) { 
    $scope.addButton = function() { 
     var content = document.getElementById("my-content"); 
     content.innerHTML="<ons-button>Another Button</ons-button>"; 
     ons.compile(content); 
     $scope.apply(); // should fix the issue, but not recommended 
    } 
}); 

PS: Вы также можете попробовать onsen 2 - вы можете:

• эксперимент с interactive tutorial
• попробовать версию ванили (без каких-либо внешних рамок) - которые не будут иметь проблемы, как это один