9

$compile サービスを使用して要素をコンパイルしました。これを DOM に直接追加すると、見栄えがよくなり、すべてのバインディングが正しくなります。ただし、その要素を文字列として使用したい場合{{stuffHere}}は、バインディングの代わりに表示されます。コンパイル後に要素の html を取得する方法はありますか?

$templateCache.put('template', '<div><div><div><span>content is {{content}}</span></div></div>   </div>');

$scope.content = 'Hello, World!';

var el = $compile($templateCache.get('template'))($scope);
$('body').append(el);

alert(el.html());

http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview

ボディに追加された要素が表示されますcontent is Hello, World!

アラートが表示されます<div><div><span ng-binding>{{content}}</span></div></div>

私がアラートから見たいのは<div><div><span ng-binding>Hello World</span></div></div>

4

1 に答える 1

13

問題は、要素の内容を読むのが早すぎることです。読み取りにa を追加する$timeoutと、正しくなります。

angular.module('demo', []);
angular.module('demo').controller('PopoverDemoCtrl', function($scope, $timeout, $compile, $templateCache) {
  $templateCache.put('template', '<div><div><div><span>content is {{content}}</span></div></div></div>');

  $scope.content = 'Hello, World!';

  var el = $compile($templateCache.get('template'))($scope);
  $('body').append(el);
  $timeout(function() {
    console.log(el.html());
  }, 300);   // wait for a short while
});

更新されたプランカー

なぜ$timeout必要なのですか？

メソッドが呼び出された後、$compileすぐには有効になりません。これは$digestサイクルが原因です。何かが影響を受けているかどうかを確認するためにサイクルを$scope実行する必要があるためです。これが を設定する必要がある理由です。要素のコンテンツが実際に変更される前に、サイクルが完了するまで待つ必要があります。これらすべてがどのように結びついているかについては、こちらでもう少し詳しく読むことができます。$digest$scope.content$timeout$digest

于 2014-10-30T18:27:13.773 に答える