2016-11-29 3 views
0

を変更することはできませんが、問題は、ページ上の変更は何もない正確なonsenui私は温泉のUIバージョン1を使用していたコンテンツ

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

するこのセクションでDOM

に変更を加えることがhttps://onsen.io/v1/guide.htmlを追いました。

「コンテンツ」変数をダンプしたり、HTML要素をダンプすると、ブラウザコンソールに新しく編集したバージョンが表示されます。ページ上にはまだ古いものがあります。

onsオブジェクトがインスタンス化され、コンパイルメソッドが呼び出され、異なるHTML要素が試されます。

答えて

0

何かを間違って実行しているか、角度のリフレッシュの問題です。

最初のシナリオでは、問題を確認できるように、コードペインを入力すれば簡単です。現在あなたが言及しているコードは、私のためにうまく働いていますhere

2番目のシナリオでは、実際には3行目のons.compile(content);がこの問題を取り除かなければなりません。バージョンに問題があるか、抜けている文脈があります。

あなたが角度関係のある何かをしているなら、あなたはまた、これらの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
  • と実験(任意の外部のフレームワークなし)バニラ版を試してみる - この1
のような問題を持っていないであろう
関連する問題