3

AngularJS と UI Bootstrap を使用して、動的にアラートを DOM に追加したいと考えています。しかし、動的に <alert> 要素を DOM に追加すると、自動的にコンパイルされません。$compile を使用しようとしましたが、コア AngularJS に存在しないタグ名を理解していないようです。どうすればこれを達成できますか？サービスのDOMに要素を「手動で」追加するのは正しい方法ですか?

プランカーを参照してください。#hardcodedalert のアラートはコンパイルされ、正しく表示されますが、#dynamicalert の内容はコンパイルされていません。

編集：

後で Web ページのさまざまなコンテキストと場所にアラートを表示したいので、アラートのコンストラクター関数を作成して、アラートが必要なすべてのコントローラーに新しいインスタンスを作成しました。好奇心のために、 <alert> タグを html に含める代わりに動的に追加できるかどうか疑問に思っていました。

4

1 に答える 1

4

あなたがやろうとしていることを「角度のある方法」で行うために、プランカーを更新しました。

あなたがやろうとしていたことにはいくつかの問題があります。その最大のものは、コントローラー内からの DOM 操作でした。サービスでその一部を処理することでそれを相殺しようとしていたようですが、JQuery を使用してその要素を選択していたときに、コントローラーで DOM を参照していました。

全体として、まだ非常に JQuery 中心の方法で開発を行っているため、ディレクティブはコンパイルされませんでした。経験則として、ディレクティブに DOM 要素の追加と削除を処理させる必要があります。これにより、ディレクティブのコンパイルと処理がすべて処理されます。試していた方法で手動で追加すると、$compile プロバイダーを使用してそれらをコンパイルし、スコープに対して実行する必要があります...これは、テストとメンテナンスの悪夢でもあります。

別のメモ: コンストラクターを含むオブジェクトを返すサービスを用意するつもりだったのかどうかわからないので、それを単なるオブジェクトにしました。注意すべきことは、サービスはシングルトン方式で作成および管理されるため、任意のコントローラーに渡す $alertService のすべてのインスタンスが同じになるということです。ほとんどの場合、$rootScope が推奨されますが、これはデータを共有する興味深い方法です。

コードは次のとおりです。

app.factory('alertservice', [function() {
  function Alert() {
    this.alerts = [];
    this.addAlert = function(alert) {
      this.alerts.push(alert);
    };
  }
  return {
    Alert: Alert
  };
}]);

app.controller('MainCtrl', function($scope, alertservice) {
  var myAlert = new alertservice.Alert();
  $scope.alerts = myAlert.alerts;
  $scope.add = function() {
    myAlert.addAlert({"text": "bar"});
  };
});

更新されたマークアップの重要な部分は次のとおりです。

  <body ng-controller="MainCtrl">
    <div id="dynamicalert">
      <alert ng-repeat="alert in alerts">{{alert.text}}</alert>
    </div>
    <button ng-click="add()">Add more alerts...</button>
  </body>

編集：リクエストを反映するように更新

于 2013-01-24T14:56:14.693 に答える