0

私はこれまで JavaScript テンプレートにハンドルバーを使用してきました。ただし、angularJs を使用したいです。angularjsに移行する良い方法を誰かが提案できるかどうか疑問に思っていました. たとえば、モーダルがあるとします。ハンドルバー テンプレートを作成し、それをページの下部に含め、js func (rest api) でデータを取得し、ハンドルバー テンプレートにコンパイル済みのものを div などに配置するように指示します。

ハンドルバーを使用してモーダルで表示する js 関数の例を次に示します。

$('[data-toggle="tabularmodal"]').click(function(e)
{
    e.preventDefault();
    var data_uri = $(this).attr('data-uri');
    var data_title = $(this).attr('data-header');
    var data;
    var source = $('#tabular-ep-data').html();
    var template = Handlebars.compile(source);
    $('.modal-header h3').html(data_title);
    $.getJSON(data_uri, function(json)
    {
        $('.modal-body').html(template(json));
    });
    $('#myModal').modal('show');
});

angularjs の方法でこれを達成する方法についていくつか提案をお願いします。ハンドルバーでは、ページの下部などに JavaScript テンプレートを含める必要があり、それから離れたいと考えています。

4

1 に答える 1

9

Angular では、次のような任意のタグに簡単に配置できるディレクティブを作成します。modal

<button modal="path/to/partial">Open modal</div>

あるいは

<modal template-url="path/to/partial">Open modal</modal>

ご覧のとおり、非常に柔軟です。ディレクティブを深く理解するには時間がかかりますが、一度理解すると非常に強力です。DOM を操作したいすべてに対して、ディレクティブが答えです。

ディレクティブでは、サービスを注入できます。これにより、作業が楽になります。たとえば、$httpを使用して、非同期リクエストを介してパーシャルを取得できます。もう 1 つの便利なサービスは$compileで、テンプレートを準備して DOM に挿入できるようにします。

ディレクティブがどのように見えるかの例を次に示しますmodal(ただし、可能性はほぼ無限です)。

var app = angular.module('app', []);
app.directive('modal', ['$http', '$compile', function($http, $compile) {
   return {
      restrict: 'E',
      link: function(scope, elm, attrs) {
         element.on('click', function(e) {
            $http.get(attrs.templateUrl).success(function(template) {
               var html = $compile(template)(scope);

               // insert html somewhere
               scope.$apply();
            });
         });

      }
   };
}]);
于 2013-01-11T20:33:46.707 に答える