Angularjs的把手

Question

到目前為止，我一直在使用javascript模板的把手。 但是我想使用angularJs。 我想知道是否有人可以建議一個過渡到angularjs的好方法。 例如，如果我有一個模態。 我創建了一個handlebars模板，將其包含在頁面底部，然后將數據獲取到js func（rest api）中，並告訴handlebars模板將編譯后的文件放入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模板等。我想擺脫這一點。

Answer 1

在Angular中，您將創建一個指令 ，例如modal ，它可以簡單地放在任何標簽上，例如：

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

甚至

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

如您所見，它非常靈活。 深入理解指令需要花費一些時間，但是一旦執行，它們將非常強大。 對於您要操縱DOM的所有內容，指令就是答案。

在指令中，您可以注入服務，這可以使生活更輕松。 例如， $ http可用於通過異步請求獲取部分內容。 另一個有用的服務是$ 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();
            });
         });

      }
   };
}]);