6

いたるところで PJAX を使用しているサイトがあり、AngularJS を使用しているページがいくつかあります。AngularJS ページについては、引き続き PJAX を使用して、HTML ページ全体やアセットなどをリロードしないことに関連するすべての利点を得たいと考えています。残念ながら、PJAX は一部の HTML をページにロードするだけで、JavaScript を起動しません。pjax の成功時に JavaScript を手動で起動できるため、これで問題ありませんが、AngularJS を初期化する原因がよくわかりません。

簡単なシナリオとして、次の HTML をページに AJAX で送信するとします。また、ページには既に Angular.js が含まれているとします。以下を Angular アプリのように動作させるには、何を呼び出すことができますか?

<div>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <hr>
  <h1>Hello {{yourName}}!</h1>
</div>

ありがとう

4

3 に答える 3

14

angular.bootstrap(...)私のために仕事をやめなかった、それは投げていた

既に存在するアプリ エラー。

だから私は(re)$compile解決策を探しましたが、フレームワークの外側からangularを使用することになると、ドキュメントはまばらです（たとえば、$ compileをどのように呼び出すのですか）。多くの試行錯誤の後、これは私にとってはうまくいきますが、オーバーヘッドがあるかもしれません:

  // outside of angular...
  var ngRefresh = function() {
    var scope = angular.element("body").scope();
    var compile = angular.element("body").injector().get('$compile');

    compile($("body").contents())(scope);
    scope.$apply();
  }

  // PJAX
  $('#page').on('pjax:success', function(e){
    ngRefresh();
  });
于 2013-09-18T14:08:22.210 に答える
2

手動初期化はうまくいきました

  angular.element(document).ready(function() {
     angular.bootstrap(document);
   });

URL の口ひげをエスケープしていたため、gem ラック-pjax でいくつかの問題が発生したため、ミドルウェアを取り除き、Web サーバーにリクエスト内の pjax を検出させ、a をオプトアウトすることにしました。レイアウトをレンダリングします。

于 2012-10-14T23:13:46.017 に答える
-1

@charlysisto によって提供されたソリューションから始めpjax:beforeReplaceて、古いスコープをクリーンアップするためのフックを追加しました。

var cleanupRemovedScopes = function() {
  var $scope = angular.element("body").scope();

    var q = [$scope], scope, first = true;
    while (q.length > 0) {
        scope = q.pop();

        if (!first) {
            scope.$destroy();
        }

        first = false;

        if (scope.$$childHead) {
            q.push(scope.$$childHead);
        }

        if (scope.$$nextSibling) {
            q.push(scope.$$nextSibling);
        }
    }
}

$('#page').on('pjax:beforeReplace', function() {
  var $timeout = angular.element("body").injector().get("$timeout");
  $timeout(function() {
    cleanupRemovedScopes();
  }
}

ただし、このクリーンアップ スクリプトの制限は、PJAX 呼び出しが本文全体を置き換えることです。

于 2016-03-23T10:31:31.553 に答える