onsenui不能改变内容

问题描述：

我使用温泉UI版本，紧跟https://onsen.io/v1/guide.html来修改DOMonsenui不能改变内容

本节确切

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

的问题是没有什么变化的页面上。

如果我转储“content”变量或转储HTML元素，它会在浏览器控制台上显示新编辑的版本。但在页面上仍然是旧的。

ons对象被实例化，编译方法被调用，尝试了不同的HTML元素。

答

要么你做的不正确，要么是角度刷新问题。

对于第一种情况，如果您提供一个codepen以便我们可以看到问题，则会更容易。目前您提到的代码对我来说工作正常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：你也可以尝试温泉2 - 你可以：

实验与interactive tutorial
试用版本香草（没有任何外部框架） - 这将不会有这样一个

问题

onsenui不能改变内容

相关推荐